Masonry Layout with CSS Grid and grid-auto-flow: dense;

By setting grid-auto-flow: dense;, the Grid auto-placement algorithm will attempt to fill in holes earlier in the grid if smaller items come up later, resulting in a Masonry-like layout.


(click for demo)

(via)

πŸ’β€β™‚οΈ Do note that the result isn’t 100% masonry, but masonry-like. As Rachel Andrew – who else – notes:

At first glance this looks a bit like masonry, however as you can see the items are all in strict rows and columns, some are just spanning multiple tracks.

For Masonry what you actually would need is for auto-placement to look at both height and width and be able to create β€˜rows’ that also push items up into the area of the row above to fill in gaps.

There’s an active issue for this listed in the CCSWG Issues

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

β˜•οΈ Buy me a Coffee ($3)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.