Masonry grid layout

Firefox has experimental support for masonry grid layout in CSS.

Masonry layout is a layout method where one axis uses a typical strict grid layout, most often columns, and the other a masonry layout. On the masonry axis, rather than sticking to a strict grid with gaps being left after shorter items, the items in the following row rise up to completely fill the gaps.

Also known as the Pinterest layout. Or the “masontry” layout, if you’re like me and keep making the same typo over and over.

To see it in action, you have to toggle a feature flag (as described on the page linked above). I’m trying it out on detritus.zone, on both the home page and the screenshot garden. Here’s what it looks like:

If you’re designing a CSS grid, switching to this new layout can be as simple as adding grid-template-rows: masonry.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: masonry;
}

Use a @supports block to define additional rules that are dependent on masonry support.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  outline: 1px solid red;
}

@supports (grid-template-rows: masonry) {
  .grid {
    grid-template-rows: masonry;
    outline: 1px solid green;
  }
}