Html 如何使用MaterializeCSS响应地堆叠卡片？

我试图在MaterializeCSS中构建一个布局，其中有许多卡片属于响应性布局：四张卡片位于大屏幕（第l3列）、两张卡片位于中屏幕（第m6列）和一张卡片位于小屏幕（第s12列）

不幸的是，即使它们的宽度相同，我也无法使它们垂直堆叠而没有间隙：

.card面板{
利润率：10px；
填充：10px；
}
.集装箱{
保证金：0；
最大宽度：100%；
宽度：100%；
}

堆叠卡片测试
标题
描述





标题
描述


标题
描述



标题
描述


标题
描述




标题
描述

基本上，在12网格系统中，您不能使用

l3

6次，这意味着3*6=18，因此您可以使用容器内的多行来使用网格的其余部分。看这把小提琴

我终于发现，我想通过列宽和列间距实现的目标是可能的：


div.card-container{
-moz列宽：23rem；
-webkit列宽：23rem；
-moz柱间距：1rem；
-webkit列间距：1rem；
}
.卡面板{
显示：内联块；
宽度：100%；
}

堆叠卡片测试
堆叠卡片测试
标题
说明






标题
说明










标题
说明




标题
说明


标题
说明






标题
说明




标题
说明




标题
说明








标题
说明












您在找这个吗？这很接近！在第二行与第二个磁贴中，仍有一个间隙。我希望在所有垂直和水平卡片之间有相同的边距/间隙。在这个例子中，你必须使所有的列具有相同的高度或使用CSS布局技巧