Native CSS Masonry Comes to CSS Grid
Rachel Andrew has introduced that masonry layout is becoming a native CSS feature through CSS Grid Layout. While most masonry use cases are already achievable with existing CSS techniques, one challenge has remained: combining vertical staggering with left-to-right source order. This new addition aims to solve that issue while also reducing the overall hackiness of masonry implementations.
Developers can already test a partial version of this feature in Firefox Nightly by enabling the layout.css.grid-template-masonry-value.enabled flag.
Masonry Syntax
The syntax uses grid-template-rows: masonry;, a choice that clearly signals the meaning: you are not setting rows, and at this point rows essentially do not exist—the browser handles that. This also implies there are no rows to inherit when using subgrid, which logically follows from the concept.
