Masonry layout

[jsnkuhn]

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.

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

Specification

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

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

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

No official spec positions from Mozilla or webkit but both are currently working on an implementation.

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
doesn't seem to be one big meta bug

Developer discussions

No response

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/

Existing Usage

No response

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/

Accessibility Impact

No response

Privacy Impact

No response

Other

No response

[thebabydino]

I'd love to finally see this cross-browser!

I started using it as soon as it appeared in Firefox some 3.5 years ago, as it was easy to test support and polyfill it.

Even wrote an article on the topic at the time, hoping it would encourage adoption and that my little fallback script would soon become obsolete.

Now it's 2023, still not supported by Chromium browsers and my little script has evolved a bit in the meanwhile (this is the version I'm currently using).

[dandclark]

Thank you for proposing Masonry layout for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

As of the deadline, the specifications for Masonry layout were not yet complete enough to allow interoperable implementations. To make progress on this area in the future, it will first be necessary to ensure that the feature has a clear specification in a standards track document.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.