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

2 Comments on 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)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

2 Comments

  1. Pingback: CSS Grid Layout Module Level 2: Masonry Layout – Bram.us
  2. Pingback: Simple Image Gallery with display: grid; and object-fit: cover; – Bram.us

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.