Contact emails alma...@microsoft.com<mailto:alma...@microsoft.com>, celeste...@microsoft.com<mailto:celeste...@microsoft.com>, yanlingw...@microsoft.com<mailto:yanlingw...@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/LV3PR00MB231831F60E861E852B9313A1BF5FA%40LV3PR00MB2318.namprd00.prod.outlook.com.
