Ready for Developer Testing: CSS Masonry

78 views
Skip to first unread message

Alison Maher

unread,
Jul 23, 2025, 12:36:51 PMJul 23
to blin...@chromium.org, Celeste Pan, Yanling Wang, Kurt Catti-Schmidt (SCHMIDT)
Contact emails
Explainer

Specification
Summary
CSS Masonry is a layout module where items of varying heights are arranged in columns, filling gaps to create a seamless grid, similar to a brick wall, perfect for accommodating elements with varying aspect ratios. Unlike CSS Grid, Masonry is better suited for one-dimensional flow layouts, like image galleries, where the focus is on filling the space efficiently rather than aligning items along both axes. Masonry provides greater design freedom, enabling the creation of dynamic, responsive layouts that adapt to content variations without the need for manual adjustments or a non-standard JavaScript implementation.


Blink component
Search tags
TAG review
We're planning on starting the TAG specification review once several issues over the CSS Masonry standard are discussed and clarified.

TAG review status
Pending

Risks


Interoperability and Compatibility
Masonry is highly anticipated by web developers and support for other browser vendors is already in experimental status. However, the CSSWG has not reached consensus on whether the feature should live under the established CSS Grid spec or on its own display type.


Gecko: Under consideration (https://github.com/w3c/csswg-drafts/issues/9041#issuecomment-2075386656) Firefox has a partial prototype of CSS Masonry, but their implementation follows the principle of extending the Grid Module instead of implementing it as a separate display type.

WebKit: In development Safari already supports https://drafts.csswg.org/css-grid-3/ at some capacity, but their implementation follows the principle of extending the Grid Module instead of implementing it as a separate display type.

Web developers: Web developers: Strongly positive (https://2024.stateofcss.com/en-US/usage/#css_missing_features)

Developers are excited about native CSS Masonry support. Masonry Layout came out in third place in the "missing features" 2024 State of CSS survey question: https://2024.stateofcss.com/en-US/usage/#css_missing_features. However, opinions are divided between whether the module should be an extension of the Grid Module or a display type on its own. Discussion around this issue can be found in the following CSSWG issues: https://github.com/w3c/csswg-drafts/issues/9041 https://github.com/w3c/csswg-drafts/issues/10233

Other signals:

WebView application risks
Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?
None


Goals for experimentation
There are still many open issues surrounding the CSS Masonry syntax and trigger in the CSSWG. The goal of developer testing is to gather more insights into the current API shape to aid in furthering those discussions.

This includes the masonry trigger: whether Masonry should be its own display type or have a separate trigger within Grid. In Chromium, the current implementation supports a separate display type.

We'd also like feedback on the newly proposed track default definition of repeat(auto-fill, auto) and masonry shorthand, which are both still being discussed in the CSSWG.

Finally, we'd like to hear from authors on whether the current API shape meets their needs, any ergonomic concerns with integrating the grid template sizing and placement properties, etc.

Ongoing technical constraints
CSS masonry is still being implemented in Chromium. If you do test it, be aware that we're still actively working on it and that you may encounter cases where it doesn't behave as expected. Some of the current limitations include dense packing, reverse placement, subgrid support, out-of-flow support, baseline support, DevTools support, fragmentation support, gap decoration support, among others.


Debuggability
Similar to other CSS display types, Masonry will expose computed values for its new properties and a layout overlay via DevTools. The layout overlay is not yet completed, but it is under development.


Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?
Yes

Is this feature fully tested by web-platform-tests?
Yes

DevTrial instructions

Flag name on about://flags
css-masonry-layout

Finch feature name
CSSMasonryLayout

Requires code in //chrome?
False

Tracking bug
Estimated milestones
DevTrial on desktop
140


Link to entry on the Chrome Platform Status
Links to previous Intent discussions
This intent message was generated by Chrome Platform Status.

Alison Maher

unread,
Jul 23, 2025, 12:44:06 PMJul 23
to blink-dev, Alison Maher, Celeste Pan, yanli...@microsoft.com, ksc...@microsoft.com
One minor edit:

The explainer link should be  https://developer.chrome.com/blog/masonry-update, as it has the most up-to-date syntax (and matches the link for dev trial instructions). This has been updated in ChromeStatus accordingly.

Thanks,
Alison
Reply all
Reply to author
Forward
0 new messages