Masonry layouts

Before the days of CSS Grid, masonry layouts were hard to achieve. The npm library masonry-layout, arguably very popular, still has around 200,000 weekly downloads according to the statistics on https://www.npmjs.com/, although it hasn’t been updated since roughly 2018, as of 2022.

The library can arrange grid items in a masonry layout with a staggering 239 lines of code. It measures column widths, item widths, and a gutter, and applies a whole lot of CSS to achieve what is nowadays possible with CSS Grid.

A note on browser compatibility

As of early 2023, only Firefox offers masonry layouts behind a feature flag, so we won’t be able to use it in production yet. Most of the masonry-related CSS attributes are in an experimental state.

We learn about this technology to be immediate experts once it's widely available.

Understanding what masonry layouts are

So, what exactly is a masonry layout? The name has nothing to do with building...