css - 如何使不同高度的卡填补CSS中的空白？

This question already has answers here:

Is it possible for flex items to align tightly to the items above them?
                                
                                    （5个答案）
                                
                        
                                3年前关闭。
            
                    
我想创建一组高度不同的卡片，但是在显示它们时遇到了麻烦，因此在较短的卡片下面没有多余的空间。

我希望它看起来像这样：



我不想让卡片伸展以填充空间。
我希望下面的卡向上滑动以填充空间。

纯CSS可以做到吗？如果没有，我将如何使用Javascript？

这里有一些需要配合的东西：
http://codepen.io/calebeby/pen/LGaVoL

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

最佳答案

我认为您需要采用“砌体-级联网格布局库” js来创建这些类型布局。

Masonry Cascading Grid Layout
Masonry Cascading Grid Layout - Options