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

Question

这是关于使用css Grid在特定数量的子元素之后实现列换行的Q＆amp; A。

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;
}

Demo

Answer 2

实现此布局的传统方法是将height设置为父元素，以便在发生溢出时将内容包装到新列。

如果我们不确定子元素的内容，则此方法不可靠，因为如果内容超出容器的预定义高度，则会导致重叠/溢出。

为了克服这个问题，我们可以使用Javascript来测量内容的高度，并将其中最大的内容分配给父级，这需要DOM操作。

  

CSS网格解决方案

随着CSS Grid的推出，我们现在有一个更好的解决方案grid-row-start属性以及:nth-child(xn + y) CSS3选择器。

.parent {
  display: grid;
}

.child:nth-child(6n + 2) {
  grid-row-start: 2;
}

.child:nth-child(6n + 3) {
  grid-row-start: 3;
}

.child:nth-child(6n + 4) {
  grid-row-start: 4;
}

.child:nth-child(6n + 5) {
  grid-row-start: 5;
}

.child:nth-child(6n) {
  grid-row-start: 6;
}

CODEPEN

希望这有帮助。