如何实现一个连续的、没有间隙的响应性列布局?(包括示例)[副本]

我需要实施一个相当现成的砌体布局。但是,出于一些原因,我不想使用JavaScript来实现它。

参数:

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

the column-count property.

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

虽然我需要元素按行排序,但至少大约:

我尝试过的方法无效:

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

现在我 能够 更改服务器端呈现并重新排序项目,将项目数除以列数,但这很复杂,容易出错(取决于浏览器决定如何将项目列表拆分为列),因此如果可能的话,我希望避免这种情况。

有没有什么新奇的flexbox魔法使这成为可能?