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元素具有grid-auto-flow: row，这意味着对于没有明确行号的项目，grid元素将生成新行以供放置。

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

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

1 个答案: