I spoke about CSS structure at CSS Day convention lately, and within the Q&A session afterwards I used to be requested about masonry structure in CSS. Masonry structure, in case you’re not conscious, is the place totally different peak gadgets are specified by columns however, somewhat than being aligned on the row axis, the gadgets under successfully transfer as much as plug any gaps, form of like a bricklayer — therefore the title. Pinterest’s grid design is a commonly-cited instance every time the masonry dialog comes up.
The present state of masonry in CSS
Presently we are able to construct a form of faux-masonry (or “fakesonry”, if you’ll) structure in CSS by utilizing columns.
.listing {
columns: 20rem;
column-gap: 1rem;
}
See the Pen
Masonry grid (Firefox with flag enabled) by Michelle Barker (@michellebarker)
on CodePen.
This can create a structure that seems to be like masonry, however the gadgets are ordered by column, not by row. For those who have been utilizing this structure for a complete web page, for the person to browse the gadgets so as they would wish to work their approach down every column, proper to the top earlier than scrolling again as much as the highest of the web page once more. Maybe this is perhaps an OK visible expertise if the order doesn’t matter, however customers navigating through a keyboard or screenreader would nonetheless must browse by column. After we consider a masonry structure, we usually count on that gadgets are ordered horizontally (or alongside the inline axis).
We are able to additionally construct a grid that form of seems to be like masonry, however it will require guide placement of grid gadgets, and the peak of every merchandise wouldn’t actually be decided by the content material. Actually, there are a variety of the way we are able to form of, nearly do masonry in CSS, and a few of them may serve us properly in some conditions — take a look at this CSS Tips article from 2019 that collates a number of of them. (Watch out for re-ordering with CSS although. It’s not advisable for accessibility causes.)
However constructing a true masonry structure at the moment requires Javascript, such because the Masonry library created for exactly this objective.
What’s subsequent for masonry?
I’d keep in mind masonry in CSS being mentioned by Rachel Andrew a while in the past, however I admit it’s form of fallen off my radar lately. I feel that’s partly as a result of the truth that I’m simply not required to construct that many masonry layouts nowadays. A few of that is perhaps all the way down to altering jobs, however I additionally suspect that masonry simply isn’t as widespread amongst designers because it as soon as was. To me, it appears like a really late-2010s design development, from when Pinterest was all the fad.
Maybe it’s additionally all the way down to higher efficiency and accessibility consciousness. Utilizing a JS library for structure isn’t going to do your efficiency metrics any favours, and is one thing I’d advise in opposition to the place doable. And positive, masonry seems to be cool* (*or it did in 2017), however I’d argue it’s not probably the most user-friendly structure: the order of the content material isn’t as clear when gadgets aren’t aligned. (I don’t have any proof to again that up, it’s only a private feeling.)
However what about masonry in CSS?
Ah sure, the entire level of this text. Regardless of masonry arguably being much less widespread, it will nonetheless be nice to have a strategy to do it with out JS. Effectively, the CSS Grid Stage 3 Specification features a proposal for masonry structure. Actually, it might probably already be enabled with a flag in Firefox, so you possibly can attempt it for your self.
It really works be utilizing the key phrase masonry for the grid-template-columns or grid-template-rows property. This instance will give us a 6-column grid with masonry utilized to the row axis, to duplicate the Pinterest-style grid:
.grid {
show: grid;
grid-template-rows: masonry;
grid-template-columns: repeat(6, 1fr);
}
See the Pen
Masonry grid (Firefox with flag enabled) by Michelle Barker (@michellebarker)
on CodePen.
For a full overview, Rachel has a nice write up from 2020 in Smashing Journal.
Does masonry belong in Grid?
Some time again, there was some debate about whether or not masonry belongs within the Grid specification, because it’s probably not Grid or flexbox, however has parts of each. Or maybe it’s personal factor altogether? Whereas I did have some reservations about it being a part of the Grid spec, I feel the present implementation is sensible. It feels slightly like Subgrid in some respects, the place we’re successfully telling a component to make use of a totally different grid on both the row or column axis — albeit one decided not by its guardian, however by a predetermined algorithm.
One other, extra soul-searchy, query is whether or not the hassle is warranted. If masonry is a declining design development, the typically glacial tempo of net requirements may be sure that by the point browser help is widespread, nobody actually needs to make use of it anyway.
Whereas I personally would like to see masonry applied, there are many options that ought to arguably be the next precedence. Watch Rachel’s discuss from CSS Day for particulars on the CSS options browsers are prioritising and dealing collectively to implement.
