One minor edit: The explainer link should be https://developer.chrome.com/blog/masonry-update <https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdeveloper.chrome.com%2Fblog%2Fmasonry-update&data=05%7C02%7Calmaher%40microsoft.com%7C2c11f382f9174fba600f08ddca078c48%7C72f988bf86f141af91ab2d7cd011db47%7C1%7C0%7C638888855981985258%7CUnknown%7CTWFpbGZsb3d8eyJFbXB0eU1hcGkiOnRydWUsIlYiOiIwLjAuMDAwMCIsIlAiOiJXaW4zMiIsIkFOIjoiTWFpbCIsIldUIjoyfQ%3D%3D%7C0%7C%7C%7C&sdata=oH%2BXgFCldea%2BMsmBS%2F1%2Br6B33F7kVJ3XPodUvES0mE4%3D&reserved=0>, 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 On Wednesday, July 23, 2025 at 9:36:51 AM UTC-7 Alison Maher wrote: > Contact emails > alm...@microsoft.com, celes...@microsoft.com, yanli...@microsoft.com > > Explainer > https://developer.chrome.com/blog/masonry > > Specification > https://drafts.csswg.org/css-grid-3 > > 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 > Blink>Layout > <https://issues.chromium.org/issues?q=customfield1222907:%22Blink%3ELayout%22> > > Search tags > grid <https://chromestatus.com/features#tags:grid>, layout > <https://chromestatus.com/features#tags:layout>, masonry > <https://chromestatus.com/features#tags:masonry> > > 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 > <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md> > ? > Yes > https://wpt.fyi/results/css/css-grid/masonry > > DevTrial instructions > https://developer.chrome.com/blog/masonry-update > > Flag name on about://flags > css-masonry-layout > > Finch feature name > CSSMasonryLayout > > Requires code in //chrome? > False > > Tracking bug > https://issues.chromium.org/issues/343257585 > > Estimated milestones > DevTrial on desktop > 140 > > > Link to entry on the Chrome Platform Status > https://chromestatus.com/feature/5149560434589696 > > Links to previous Intent discussions > Intent to Prototype: > https://groups.google.com/a/chromium.org/d/msgid/blink-dev/PH0PR00MB1349C8CC6167E8A11FB17489BCF82%40PH0PR00MB1349.namprd00.prod.outlook.com > > > This intent message was generated by Chrome Platform Status > <https://chromestatus.com/>. > > -- You received this message because you are subscribed to the Google Groups "blink-dev" group. To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscr...@chromium.org. To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/eb18fa4d-9bc6-49bf-a8ce-88297640b89bn%40chromium.org.
