Materialize: Alignment of col elements with different heights within a row

[matthenning]

Description

When using multiple col elements within a row the vertical alignment can create white spaces (see screenshots, for lack of better descriptive skills).

I guess it's a general problem with the grid system. Is there an elegant solution to achieve what I drew up in the Screenshots section?

Repro Steps

<div class="row">
    <div class="col l4" style="height: 150px"> </div>
    <div class="col l4" style="height: 100px"> </div>
    <div class="col l4" style="height: 150px"> </div>
    <div class="col l4" style="height: 150px"> </div>
</div>

Screenshots / Codepen

Actual behaviour: https://i.imgur.com/Y5nLEgP.png

Desired behaviour: https://i.imgur.com/BggPxbl.png

[acburst]

Masonry.js

This is actually semi achievable in css with flexbox but it is not perfect and Masonry gives a lot more functionality.

[matthenning]

I've looked into flexbox but masonry seems to be exactly what I'm looking for, thank you.

[matthenning]

In case anyone else is looking for a solution, take a look at this: https://github.com/Dogfalo/materialize/tree/master/templates/masonry-template

[michelolvera]

It seems very silly to me that materialize does not have this solved...