内容填充第一列然后换行到下一列

Question

我正在创建一个包含 3 列的新页面布局。我希望我的内容（由几个不同的元素组成）填充第一列的可用高度，然后换行到下一列，依此类推。用户可以根据需要添加元素。

我正在使用带有 Flex-Layout 的 Angular 7。我查看了https://tburleson-layouts-demos.firebaseapp.com/#/docs，但没有一个与我的问题相似。

我还看了： - flow 2 columns of text automatically with CSS - Make grid container fill columns not rows

无济于事。

Css 列布局将我的内容平均分成 3 列。它不会在包装前填充第一列。

我希望它填充第一列，然后是第二列，最后是第三列。是否可以使用 flex 或 Css Grid/Columns 来实现这一点并不重要

Answer 1

我设法解决了。

父div上的这两行css：

column-count: 3; column-fill: auto;

现在所有子元素都会先自动填充列然后换行