如何使内容垂直流动

Question

我正在创建一个动态网站，在该网站中，父网站内部有一个父div和子div（宽度可变），并试图做到这一点： 创建新的div时，将其向下推，直到其填充到父级高度为止，然后开始一个新列，例如：

图像：

 <style>
    .parent {
      height: 800px;
      width: 100%;
      overflow-y: hidden;
      border: 1px solid black;
    }
    .child1 {
      background-color: blue;
      height: 150px;
      width: 150px;
    }
    .child1 {
      background-color: red;
      height: 150px;
      width: 300px;
    }
    </style>

    <div class="parent">
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child2"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child2"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child2"></div>
      <div class="child1"></div>
      <div class="child1"></div>
      <div class="child2"></div>
    </div>

Answer 1

CSS的display: grid是所附图像中描述的布局的解决方案：

.parent {
    height: 800px;
    width: 100%;
    border: 1px solid black;
    display: grid;
    grid-gap: 2px;
    grid-auto-columns: 150px;
    grid-template-rows: repeat(4, 1fr);
    grid-auto-flow: column;
    color: white;
}
.child1 {
    background-color: blue;
}
.child2 {
    background-color: red;
    grid-column: span 2;
}

网格：

display: grid;可以在容器上启用网格布局。
grid-gap: 2px;指定网格中行和列之间的间距为2px。
网格中的grid-auto-columns: 150px;列应为150px宽。
grid-template-rows: repeat(4, 1fr);网格将包含4个等高的行。
当内容到达容器底部时，grid-auto-flow: column;将创建一个新列。

网格元素：

在没有任何额外CSS的情况下，蓝色元素将各自占据网格中1行高1列宽的单元格。

.child2 {
    background-color: red;
    grid-column: span 2;
}

红色元素将跨越2列。

Working fiddle here