Masonry and good defaults – Rachel Andrew

September 23, 2024

I’ve been writing about and teaching people CSS layout for a very long time. People sometimes call me an expert in CSS. I don’t know about that, but I’m confident in claiming expertise in teaching and writing about CSS. I’ve been doing this for a long time, about 25 years. Over that time I’ve learned which things are tricky for the majority of people to understand, and it’s that knowledge I try to bring to the CSS Working Group.

The Chrome team believes that we should define masonry as a separate value for display—display: masonry, you can read in detail why in Feedback needed: How should we define CSS masonry? However this post isn’t about what my colleagues think, this one is just my opinion.

My opinion is, as it was in 2020, that defining masonry as part of grid would be a mistake.

Source: Masonry and good defaults – Rachel Andrew

Masonry layouts are a specific kind of grid–perhaps the most well known example from the Web is Pinterest. Images of different widths and weights are laid-out in such a way as to minimise gaps, particularly vertical ones.

It’s a challenging layout to do with web technologies, and debates have continued for years as to whether it should be a “native” layout mode in CSS and if so how should this be done.

Rachel Andrew here summarises her thought about this challenge–Rachel is genuinely one of the foremost experts in web layouts (and much more).