如何从每列的第一行开始自动放置网格项目？答案

【问题标题】：How to auto place grid items starting from the top row of each column?如何从每列的第一行开始自动放置网格项目？
【发布时间】：2019-11-01 20:04:09
【问题描述】：

我有一个 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 行组成的网格。

我需要改变什么来实现我想要的布局？

【问题讨论】：

我不太清楚你要做什么，但我建议grid-auto-flow:column 可能是一个解决方案......但我们需要一个演示.
是的，这正是我所需要的！谢谢你。我的问题是放在第二列的项目不是从网格的第一行开始，而是从第九行开始。 grid-auto-flow:column 解决了这个问题。感谢您对可重现示例的澄清，下次我会记住的！
您可以在我的一个答案here 中看到更多关于 grid-auto-flow 与 隐式和显式网格 的信息

标签： css css-grid

【解决方案1】：

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

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

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

【讨论】：