html - 如果为列和行设置了模板，如何使 CSS 网格自动换行？

Question

我的 .wrapper 元素中有 12 个子 div，我想将它们堆叠在一起。数字 12 实际上是动态的，所以我不知道我会生多少个 child 。现在我的网格布局是这样的:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  grid-auto-flow: column dense;
  grid-gap: 10px;
}

这很好，直到网格开始包裹元素(布局已满，网格为 3x2，包含 6 个元素)。第 7 个、第 8 个和所有其余的都堆叠在前 6 个旁边，尽管我希望它们使用相同的模板在新的一行中(所以基本上我的网格将变成 2x(3x2))。

解释本身可能没有太大意义，请查看 Codepen

如何让第六个之后的元素换行？

Answer 1

您可以使用自动流来形成网格(如@vals 的回答建议)，然后通过一组 :nth-child() 规则设置填充顺序的模式:

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 10px;
}

.wrapper > :nth-child(6n + 1),
.wrapper > :nth-child(6n + 2) {
  grid-column: 1;
}

.wrapper > :nth-child(6n + 3),
.wrapper > :nth-child(6n + 4) {
  grid-column: 2;
}

.wrapper > :nth-child(6n + 5),
.wrapper > :nth-child(6n + 6) {
  grid-column: 3;
}

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
  <div>Eleven</div>
  <div>Twelve</div>
  
  <div>Thirteen</div>      
  <div>Fourteen</div>      
  <div>And so on</div>
</div>