如何在网格样式中正确显示动态柔性网格

我需要实施砌体布局。然而,出于多种原因,我不想使用JavaScript来做这件事。

参数:

• 所有元素的宽度相同
• 元素的高度无法在服务器端计算(图像加上各种数量的文本)
• 如果必须的话,我可以接受固定数量的列

有一个简单的解决方案可以在现代浏览器中工作, the column-count property.

该解决方案的问题在于元素按列排序:

虽然我需要按行对元素进行排序,但至少大致是这样:

我尝试过的方法不起作用:

• 制作物品 display: inline-block : wastes vertical space.
• 制作物品 float: left : lol, no.

现在我 能够 更改服务器端呈现并重新排序项目,将项目数除以列数,但这很复杂,容易出错(基于浏览器决定将项目列表拆分为列的方式),所以如果可能的话,我想避免这样做。

是否有某种flexbox魔法使这成为可能?