CODEWITHSUNDEEP
cssmaterialize
Rodrigo Butzke
Rodrigo Butzke

Reputation: 448

Materialize css cards with same width but different heights

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.

Upvotes: 1

Views: 4472

Answers (2)

Rodrigo Butzke
Rodrigo Butzke

Reputation: 448

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',
});

Upvotes: 4

nordicnomad
nordicnomad

Reputation: 96

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/

Upvotes: 3

Related Questions