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

Question

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

我使用的是Angular 7和Flex-Layout。我看过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;

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