css - 如何从每列的顶行开始自动放置网格项？

Question

我有一个 css-grid 元素，我想通过明确指定每个元素的列号和行跨度来放置我的网格元素，同时让每个元素的行号自动排序。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

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

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

.small {
  grid-row: span 1;
}

.medium {
  grid-row: span 2;
}

.large {
  grid-row: span 3;
}

<div class="grid-container">
  <div class="col-1 medium">ITEM 1</div>
  <div class="col-1 small">ITEM 2</div>
  <div class="col-1 medium">ITEM 3</div>
  <div class="col-1 small">ITEM 4</div>
  <div class="col-1 medium">ITEM 5</div>
  <div class="col-1 small">ITEM 6</div>
  <div class="col-1 medium">ITEM 7</div>
  <div class="col-1 medium">ITEM 8</div>
  <div class="col-1 small">ITEM 9</div>
  <div class="col-1 large">ITEM 10</div>
  <div class="col-1 small">ITEM 11</div>
</div>

我希望这会放置我的网格项，从两列的第一行开始，生成一个由两列和九行组成的网格。但是，现在第二列的第一项与第一列的最后一项放在同一行，然后为其余元素生成新行，从而产生一个由两列和 17 行组成的网格。

我需要更改什么才能实现我想要的布局？

Answer 1

正确的答案是将 grid-auto-flow: column 规则添加到我的网格元素。

默认情况下，网格元素具有 grid-auto-flow: row，这意味着对于没有明确行号的元素，网格元素将生成新行以放置它们。

grid-auto-flow: column 规则使网格元素生成新列，或者在我的情况下，第二列已经由 grid-column: 2 生成 我的 .col-2 元素的规则它只是将元素放在该列中 - 这正是我想要的。