CSS 网格是否可以在行和列上自动布置 "staggered" 的项目？

Question

我正在尝试确定 CSS 网格是否可以自动布置在列和行级别上相互交错的项目。

很难准确描述我想要什么，所以这里有一个这样的网格的例子，假设这些项目的顺序是正确的（所以不一定按照我在HTML 目前）：

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-auto-rows: 100px;
  column-gap: 20px;
  row-gap: 20px;
  justify-content: center;
}

.grid div{
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: white;
}

.grid-item-1{
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}

.grid-item-2{
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: 4;
}

.grid-item-3{
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
}

.grid-item-4{
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 2;
}

.grid-item-5{
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 4;
}

<div class="grid">
  <div class="grid-item-1">1</div>
  <div class="grid-item-2">2</div>
  <div class="grid-item-3">3</div>
  <div class="grid-item-4">4</div>
  <div class="grid-item-5">5</div>
</div>

我希望能够为项目提供像素高度和宽度，并让网格自动按照这种排列方式对它们进行布局，而无需对每个项目的网格区域进行硬编码。

我到处寻找解决方案，但无济于事。我只是想知道这是否可能，或者这样的布局是否仅适用于每个项目的硬编码网格区域。

Answer 1

您只需设置行数或列数

.grid{
  display: grid;
  grid-template-columns: repeat(3, 100px); /* only 3 here */
  grid-auto-rows: 100px;
  grid-auto-flow:dense; /* don't forget this */
  column-gap: 20px;
  row-gap: 20px;
  justify-content: center;
}

.grid div{
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: white;
}

.grid-item-1,
.grid-item-5{
  grid-row: span 2;
}

.grid-item-2,
.grid-item-4{
  grid-column: span 2;
}

<div class="grid">
  <div class="grid-item-1">1</div>
  <div class="grid-item-2">2</div>
  <div class="grid-item-3">3</div>
  <div class="grid-item-4">4</div>
  <div class="grid-item-5">5</div>
</div>

CSS 网格是否可以在行和列上自动布置 "staggered" 的项目？

Is a CSS grid with automatically laid out items that are "staggered" on rows and columns possible?

html

css

css-grid