masonry web layout

What feels like two decades ago I was busy making masonry-style layouts for different agency & portfolio websites. Funny to see the masonry layout slowly but surely reaching the web platform as a standard.

CSS masonry layout example

Here’s an excerpt of the proposed (!) syntax:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  item-flow: row collapse;  
  gap: 1rem;
}