如何在 css 网格上组织每列中项目数量不均匀的项目

Question

我想在 css 网格上从上到下组织项目，每列包含任意数量的项目，但是当我尝试将元素放在下一列上时，它们不会从网格顶部开始，而是停留在与上一项相同的行。我该如何解决这个问题？

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns with equal width */
  gap: 10px; /* Space between grid items */
}

.column-1 {
  grid-column: 1;
}

.column-2 {
  grid-column: 2;
}

.column-3 {
  grid-column: 3;
}

.grid-item {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid #000;
  text-align: center;
}

<div class="grid-container">
    <div class="grid-item column-1">Item 1.1</div>
    <div class="grid-item column-1">Item 1.2</div>
    <div class="grid-item column-1">Item 1.3</div>
    <div class="grid-item column-2">Item 2.1</div>
    <div class="grid-item column-2">Item 2.2<br>foo</div>
    <div class="grid-item column-2">Item 2.3<br>foo</div>
    <div class="grid-item column-2">Item 2.4</div>
    <div class="grid-item column-2">Item 2.5</div>
    <div class="grid-item column-3">Item 3.1</div>
    <div class="grid-item column-3">Item 3.2</div>
  </div>

Answer 1

您缺少一个属性来告诉网格您想要实际填充该列。这叫

grid-auto-flow

来自 mdn 文档

网格自动流...准确指定自动放置的项目如何流入网格。

...

column

通过依次填充每一列来放置项目，并根据需要添加新列。

因此只需将

grid-auto-flow: column;

属性添加到

.grid-container

类即可。

.grid-container {
  display: grid;
  grid-auto-flow: column; /* SOLUTION */
  grid-template-columns: repeat(3, 1fr); /* 3 columns with equal width */
  gap: 10px; /* Space between grid items */
}

.column-1 {
  grid-column: 1;
}

.column-2 {
  grid-column: 2;
}

.column-3 {
  grid-column: 3;
}

.grid-item {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid #000;
  text-align: center;
}

<div class="grid-container">
    <div class="grid-item column-1">Item 1.1</div>
    <div class="grid-item column-1">Item 1.2</div>
    <div class="grid-item column-1">Item 1.3</div>
    <div class="grid-item column-2">Item 2.1</div>
    <div class="grid-item column-2">Item 2.2<br>foo</div>
    <div class="grid-item column-2">Item 2.3<br>foo</div>
    <div class="grid-item column-2">Item 2.4</div>
    <div class="grid-item column-2">Item 2.5</div>
    <div class="grid-item column-3">Item 3.1</div>
    <div class="grid-item column-3">Item 3.2</div>
  </div>