Masonry Layout with CSS

#css #webdev

One time I was exploring different kinds of layouts for HTML content, I found out about the masonry grid. I first saw it on Pinterest, and it looked so cool and fluid, like a game of Tetris for images. I started researching how it could be done, it couldn't be that difficult, right? CSS was powerful enough to make this work, right? Well, not quite.

What is masonry?

Masonry layout is a type of grid layout where the items are placed out in the inline direction. When they wrap to the next line, the items will automatically fill in any gaps left by the first row of items. This is in stark contrast to how CSS grids work today, where the second row of items does not bleed into the first.

Todays CSS grid solution doesn't have the ability to dynamically place items in the spaces left by the previous row, at least not without some amount of JavaScript involved in the process. Thus, I present to you the solution to all of the aforementioned problems; CSS columns.

A solution

CSS columns have been around for a good while now. And while the property has mostly been used for typography and textual content, it can just as well be used for laying out images or cards in masonry-ish way.

.masonry {
  columns: 3;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

There are some caveats to this method however. Using grid, the items are placed in the inline direction. With columns however, the items are placed in the block direction. It looks like a masonry layout, but it doesn't quite function like one. Remember, masonry layouts are still supposed to be laid out in the inline direction; from left to right.

Conclusion

As you can see, we can already get quite close to masonry layouts with pure CSS, and if you just like the look of the Tetris-ish nature of the masonry layout, you can most likely just use CSS columns and be as happy as ever. But if you are dependant on the inline flow of a real masonry layout, you are just going to have to get some JavaScript involved for now.

There are, however, plans in motion to get masonry layouts natively supported in CSS. The spec is only supported in Firefox at the moment, but we can only hope the other browsers jump on the masonry-train soon enough.