如何制作不同高度的卡片填补css的空白?

时间:2016-02-15 05:51:01

标签: css material-design flexbox

我想创建一组不同高度的卡片,但是我在显示它们时遇到了麻烦,因此在短片段下面没有多余的空间。

我希望它看起来像这样:

enter image description here

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

纯CSS可以实现吗?如果没有,我将如何使用Javascript进行此操作?

以下是可以使用的内容: http://codepen.io/calebeby/pen/LGaVoL

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

1 个答案:

答案 0 :(得分:2)

我认为您需要采用'Masonry - Cascading网格布局库'来创建这些类型的布局。

Masonry Cascading Grid Layout
Masonry Cascading Grid Layout - Options