html - 如何让内容垂直流动

Question

我正在创建一个动态网站，其中有一个父 div 和子 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