Native CSS Masonry Inches Forward in Firefox Nightly
For years, the CSS community has wanted a real masonry layout — the kind where cards of varying heights pack into ragged rows rather than strict grid lines. It's been possible to approximate with CSS alone, but only by arranging items in columns, which breaks the natural top-to-bottom, left-to-right source order most developers expect. Anything closer to true masonry has meant reaching for JavaScript.
That may be changing. Firefox has shipped an experimental implementation of masonry as part of CSS Grid in Firefox Nightly, behind a feature flag. To try it, load about:config and flip layout.css.grid-template-masonry-value.enabled to true. The implementation is based on a proposal that's still very much under discussion at the CSS Working Group.
Jen Simmons has already put together a set of demos showing what the syntax can do.
Does masonry belong in the Grid spec?
The proposal has not been universally welcomed. Rachel Andrew has pushed back on adding masonry to the CSS Grid specification, arguing that the layout isn't really a grid at all:
Grid isn't Masonry, because it's a grid with strict rows and columns. If you take another look at the layout created by Masonry, we don't have strict rows and columns. Typically we have defined rows, but the columns act more like a flex layout, or Multicol. The key difference between the layout you get with Multicol and a Masonry layout, is that in Multicol the items are displayed by column. Typically in a Masonry layout you want them displayed row-wise.
Speaking personally, I am not a huge fan of this being part of the Grid specification. It is certainly compelling at first glance, however I feel that this is a relatively specialist layout mode and actually isn't a grid at all. It is more akin to flex layout than grid layout.
By placing this layout method into the Grid spec I worry that we then tie ourselves to needing to support the Masonry functionality with any other additions to Grid.
All of this is still exploratory. Simmons warns against reading too much into the Nightly build, emphasizing that this is an experiment and a prototype, not a finalized spec. Any feedback belongs in the CSSWG discussion on GitHub.
Masonry and the Houdini connection
This isn't the first time native masonry has been on the table. The CSS Layout API, part of Houdini, was floated as a way to build such layouts. A masonry demo written with a layout worklet is available in Chrome Canary, along with the source in the Houdini samples repository.
Whether Houdini is meant to be a testing ground for ideas that eventually graduate into browser-native CSS, or the permanent home for experimental layout methods like this, is still an open question.
