如何在css中制作不同高度的卡片以填补空白？

Question

我想创建一组不同高度的卡片，但我在显示它们时遇到了困难，这样它就不会在较短的卡片下面有额外的空间。

我想让它看起来像这样

​

​

我不想要的是让牌伸展来填补空间。我希望下面的卡片能向上滑动以填补空间。

这是可能的纯CSS吗？如果没有，我将如何使用Javascript来做到这一点？

下面是一些需要处理的内容：http://codepen.io/calebeby/pen/LGaVoL

.row {
    @include display(flex);
    @include flex-wrap(wrap);
}

Answer 1

我认为您需要采用‘砖石-级联网格布局库’js来创建这些类型的布局。

砌体层叠网格布置

砌体层叠网格布局-选项