Masonry layout is when items of varying sizes are laid out so there aren't any uneven gaps.

Abhigyan

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Learn how to create a Masonry Layout using CSS by using the grid-template-columns function and the grid-column property.

How to Build a Masonry Layout Using CSS

But is this enough? Let’s take it to the next level by adding some perspective.

Eventually, we’re going to have vanilla masonry support with CSS Grid. See Rachel Andrew’s post on Smashing Magazine: <a href="https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/" target="_blank" rel="noopener nofollow">https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/</a>

It’s a really excellent and well-written article. I enjoyed every step.

It will be very helpful for developers like me, good work 👍

Insightful and very well-written!