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

我正在为应用程序构建报纸风格的布局。我的页面分为 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;
}

请参阅此处查看我尝试过的示例。 https://codepen.io/jamesajohnson/pen/aELeby

Adding column-fill: auto; to .css-col应该给你你正在寻找的东西，但你需要添加一个height to .css-col