实现 css 张宽度相同但高度不同的卡片

Question

我正在尝试构建一个显示多张不同高度的卡片的屏幕，但是一旦它们具有不同的高度，它们就会像这样将其发送到最高卡片的下方：result

但我想放在下一个，它应该在它的正下方，像这样：desired result

我的结构很简单：

<body>
    <main>
        <div class="section">
            <div class="row container">
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
                <div class="col s12 m6 l4">CARD</div>
            </div>
        </div>
    </main>
</body>

我试过在 cols div 中使用浮点数，但没有任何效果... 有人知道如何制作我想要的东西吗？谢谢

Answer 1

您可能会考虑使用 flexbox 而不是仅仅使用网格，它应该对我在这些类型的布局方面有很大帮助。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我试过使用 flexbox 但没有成功。

但我发现这个很棒 jQuery 图书馆：http://masonry.desandro.com/

将我的结构更改为

<body>
    <main>
        <div class="section">
            <div class="row container">
                <div class="cards">
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                    <div class="col s12 m6 l4">CARD</div>
                 </div>
            </div>
        </div>
    </main>
</body>

并使用了这些行：

$('.cards').masonry({
    itemSelector: '.col',
});

实现 css 张宽度相同但高度不同的卡片

Materialize css cards with same width but different heights

css

materialize