Native CSS masonry layout

Published: 2023.02.09 · 2 minutes read

A masonry type of layout, one of the biggest obsessions of UX designers, is finally coming to CSS. Style popularized by Pinterest, where elements fill the vertical gaps instead of being aligned to the row axis.

A default layout alignment vs masonry

Over the years, we have seen a lot of JavaScript-based solutions to achieve this effect. Masonry by David DeSandro is the most popular one. I created Bricky seven years ago (WOW, time flies 🤯) that solves the same problem. Luckily we can start thinking about getting rid of these hefty libraries.

The grid-template-rows: masonry and grid-template-columns: masonry, defined as part of the CSS Grid Layout Module Level 3, are the modern solution for bricklayer-like designs. At the time of writing this article, the feature is available only in Firefox behind the layout.css.grid-template-masonry-value.enabled flag and Safari Technology Preview.

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-template-rows: masonry;
}

Keep in mind accessibility — the default (pack) item placement algorithm may cause an unintended tabbing order. Luckily, a masonry-auto-flow gives us granular control over the item’s placement.

I miss writing about CSS. This language gets more and more incredible features at an unstoppable rate, so expect more posts about it.

• Buy me a coffee

Leave a comment#

Save my data for the next time I comment