html - 在网格布局中将单行独立成列

Question

我想创建一个网格布局，其中单行独立分成如下列：

这是我到目前为止尝试的代码：

.container {
  position: relative;
  width: 400px;
  height: 400px;
  display: grid;
  grid-template-rows: 100px 300px;
  border: 1px solid rgb(255, 127, 39);
}

.container::before {
  content: '';
  position: absolute;
  width: 100%;
  top: 100px;
  border: 1px solid rgb(255, 127, 39);
}

<div class="container"></div>

.container::before只是为了向您展示行的分离。

我知道我可以使用一个小技巧，div在 的第一行中插入一个 fitcontainer并将其划分为如下所示的列：

由于有很多网格属性我不知道它们的用途，我想知道最简单的方法是什么。

标签： htmlcsscss-grid

Answer 1

.container {
  width: 400px;
  height: 400px;
  display: grid;
  grid-template-rows: 100px 300px;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: .5rem;
}

.container> :last-child {
  grid-column: 1 / -1;
}

.container>div {
  background: lightgrey;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>