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)


πŸ’β€β™‚οΈ 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

Elsewhere ,

Leave a Reply

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