Masonry layout

[BearCooder]

Description

From the spec:

Masonry layout is a common Web design pattern where a number of items—commonly images or short article summaries—are placed one by one into columns in a way that loosely resembles stone masonry. Unlike multi-column layout, where content is placed vertically in the first column until it must spills over to the second column, masonry layout selects a column for each new item such that it is generally closer to the top of the layout than items placed later.

It’s not possible to achieve this layout using earlier CSS layout models, unless you know up-front how tall each item will be, or use JavaScript for content measurement or placement.

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout According to the MDN documentation above there is no Browser support.

Detailed explainer: https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/

Open Issues https://github.com/w3c/csswg-drafts/issues?page=1&q=is%3Aissue+masonry+is%3Aopen

Tests https://wpt.fyi/results/css/css-grid?label=master&label=experimental&aligned&q=masonry

Browser bug reports

Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1076027&q=masonry&can=2

Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1757446

webkit: https://bugs.webkit.org/buglist.cgi?quicksearch=masonry

Specification

https://drafts.csswg.org/css-grid-3/#grid-template-masonry

Additional Signals

Workarounds

There are many approaches to creating Masonry like layouts that have been used over the years. They all have strengths and weaknesses. Many are detailed here:

https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/

Its always a hot topic how to do it without JS and several discussions. Even recently discussed with Adam Argyle on this podcast:

• https://shoptalkshow.com/614/

Other posts/discussions etc:

• https://x.com/naman34/status/1837351840846868544
• https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/
• https://css-irl.info/masonry-in-css/
• https://www.freecodecamp.org/news/how-to-create-a-mansory-layout-using-html-and-css/
• https://hackernoon.com/how-to-build-a-masonry-layout-using-css
• https://developer.chrome.com/blog/masonry
• https://stackoverflow.com/search?q=masonry+css

Polls & Surveys

Masonry layout is the second most called out "missing feature" in the 2023 state of CSS survey https://2023.stateofcss.com/en-US/usage/