When I first began to demo CSS Grid to people, in particular the dense packing mode, at a first glance it looked a bit like the layout achieved by – most notably – the Masonry JavaScript plugin. Sometimes also described as a Pinterest Layout, after the application which is best known for using this kind of layout.
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.
I raised an issue in January 2017 due to the number of people who had requested a Masonry-like layout. It seemed to come up in every talk and workshop I did, as it was a very popular layout at one point. At that point I noted it seemed more flex, than grid-like.
Requests for Masonry do seem to have died down somewhat, although that may well be because people have realised grid is not Masonry so have stopped thinking it would solve that problem and therefore don’t comment on it. However Firefox have implemented an experimental way to do this, which is currently using the grid spec. The CSS Working Group would love for you to have a look at it.
To do so, you need to have Firefox Nightly, and to enable the flag layout.css.grid-template-masonry-value.enabled by going to about:config in the Firefox Nightly URL bar.
I’ve built a simple demo which you can see below, plus a second one as an experiment to see what happens if you have an item placed on the grid.
See the Pen
Proposed Masonry by rachelandrew (@rachelandrew)
on CodePen.
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. Or, essentially saying that you can’t do a certain thing when in Masonry mode. Whereas Flexbox is a simpler spec, and one that is less likely to have new functionality loaded into it. I’m keen that we get the layout method, less so of where Mozilla are proposing it sits. I can imagine this being a future weight that has to accompany all additions to Grid, that we’ll forever more be asking the question, “but how does this work with Masonry?” So I would weigh the convenience of it seeming to fit quite nicely into Grid today, with whether that convenience today will become a burden in the future.
Anyway, the CSSWG would love your feedback. Jen Simmons has also built some demos – here and here. In particular it would be very useful to see if it would work in situation where you have already used Masonry, or would have liked to but didn’t because of the performance issues of that type of layout.