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

Question

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

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>

所需的布局类似于，

在特定数量的项目（在本例中为 6）之后，剩余的内容应换行到一个新列中。

Answer 1

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

如果我们不确定子元素的内容，则此方法不可靠，因为如果内容超过容器的 pre-defined 高度，它会导致 overlap/overflow。

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

CSS Grid solution

随着 CSS 网格的引入，我们现在有了 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

希望对您有所帮助。

Answer 2

您可以将 grid-template-rows 和 grid-auto-flow 与 CSS 结合使用，例如：

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

Demo

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

Column wrap after a specific number of child elements

css

multiple-columns

css-grid