Is vertical order with ragged bottoms OK?
If it is, then CSS columns will do just fine.
Flexbox can do vertical columns with ragged endings too
But it’s not quite as clever, because you’ll need to set a height of some kind to get it to wrap the columns. You’ll also have to be explicit about widths rather than having it decide columns for you.
But it’s doable and it does auto space the gaps if there is room.
Jamie Perkins originally wrote this, then Janosh Riebesell re-wrote it and, now I’m porting it here.
It totally messes with the order and requires the children to be flexy about their height, but it does the trick:
Is horizontal line masonry OK?
If it’s just the uneven brick-like look you’re after, then horizontal masonry is way easier. You could probably even float stuff if you don’t care about the ragged edge. If you wanna keep it a block… flexbox with allowed
flex-grow is the ticket.
You’d think CSS grid could help
CSS grid is very amazing and useful in a CSS developer’s everyday life, but it’s not really designed for masonry style layouts. CSS grid is about defining lines and placing things along those lines, where masonry is about letting elements end where they may, but still exerting some positional influence.
Balázs Sziklai has a nice example of auto-flowing grids that all stack together nicely, with pretty good horiziontal ordering:
But you can see how strict the lines are. There is a way though!
Andy Barefoot wrote up a great guide. The trick is setting up repeating grid rows that are fairly short, letting the elements fall into the grid horizontally as they may, then adjusting their heights to match the grid with some fairly light math to calculate how many rows they should span.
Rahul Arora went down this road as well:
Both of these are pretty cool in that the DOM order and visual order are sensical.
Order-shifted elements in a Flexbox layout
Normally when you think of using
order to move things around in a flexbox or grid layout, you’re in dangerous territory, as tab order will likely follow the DOM order, which no longer matches the expected tabbing order because visually things have moved all around. In this demo by Diederik van Leeuwen,
DOM-shifted elements in a CSS columns layout
What people generally want is column-stacking (varied heights on elements), but with horizontal ordering. That last grid demo above handles it pretty well, but it’s not the only way.
There’s also the original library and variations
Float away, my pretties.
And it’s newer, hipper verion: Colcade!
Houdini is broken up into different APIs that are all shipping at different times. The Paint and Typed OM APIs are the furthest along, but there is some support for the Layout API, which is incredibly exciting as it unlocks possibilities like masonry layout.
Here’s a demo from Google: