在特定数量的子元素之后换行

Question

这是关于使用 css Grid 在特定数量的子元素之后实现列换行的问答。

HTML 模型

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  .....
  <div class="child">n</div>
</div>

所需的布局类似于，

1  7   13
2  8   14
3  9   .
4  10  .
5  11  n
6  12

在特定数量的项目（在这种情况下为 6）之后，剩余的内容应该被包装到一个新列上。

Answer 1

您可以通过组合grid-template-rows和grid-auto-flow使用 CSS来实现这一点，例如：

.parent {
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-gap: 10px;
    grid-auto-flow: column;
}

演示