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:
See the Pen Rahul Arora’s Left-to-right Masonry Layout using CSS Grid by Chris Coyier (@chriscoyier) on CodePen.
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!
The post Piecing Together Approaches for a CSS Masonry Layout appeared first on CSS-Tricks.
CSS Tricks Go to Source
Powered by WPeMatico