Materialize css cards with same width but different heights

Question

I'm trying to build a screen that show several cards with different heights, but once they have different heights, they send it to the down of the highest one like this: result

but i want to fit at the next one it should right below it, like this: desired result

My structure for this is easy:

<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>

I've tried using floats at the cols divs but nothing worked out... Does anybody knows how to make something like i want? Thanks.

score 4 · Answer 1 · answered Jul 14 '16 at 18:41

I've tried using flexbox but didn't work out.

But I've found this amazing jQuery Library: http://masonry.desandro.com/

Changed my Structure to

<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>

And used those lines:

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

score 3 · Accepted Answer · answered Jul 13 '16 at 23:29

3

You might look into using flexbox instead of just a grid it should helps me a lot with these kinds of layouts.

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

answered Jul 13 '16 at 23:29

nordicnomad

96
5

This is gold. Flex needs to become the new standard for any grid layout system. – Shadoath Jul 02 '17 at 06:15

Materialize css cards with same width but different heights

2 Answers2