html - CSS 列，从上到下然后从左到右

Question

我正在为一个应用构建一个报纸风格的布局。我的页面分为 8 列，列应先垂直填充，然后水平填充。

如果没有足够的内容来填充页面，列仍应首先垂直填充，在页面右侧留下空白。目前，它们首先水平填充，在内容下方留下空白。

我已经用 CSS 列试过了，但它似乎总是填满页面的宽度，我看不出有什么办法可以改变它。

我也尝试过使用 flex box，但是 flex wrap 不会像 CSS columns 那样在 div 内断开/换行。

.flex-col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 300px;

  p {
    width: 250px;
  }
}

.css-col {
  columns: 3;
}

See here for an example of what I have tried.

Answer 1

将 column-fill: auto; 添加到 .css-col 应该会给你想要的东西，但你需要添加一个 height 到 .css-col