CSS: masonry layout

What is masonry layout?

from MDN:

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.

pinterest.com's layout is one classic example of it:

What can we use from our CSS toolbox?

grid

We use a simple HTML markup:

<div class="photos">
  <img src="./img/image-1.jpg" alt="sample">
  ...
  ...
</div>

My first shot was grid & grid-template-column

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;

  img{
    width: 100%;
  }
}

The responsiveness is great, but we have gaps below each image.

column-count

next, use the column-count CSS container property.

The column-count CSS property breaks an element's content into the specified number of columns.

.photos {
  column-count: 4;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

Not good.
The current layout looks as desired, but the images are scaled and not responsive. While we could use media queries to control responsiveness, we’re aiming for a more robust solution.

Using columns

The columns CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.

.photos {
  columns: 250px;

  img{
    width: 100%;
    margin-bottom: 1rem;
  }
}

A single line of code. Amazing!

How does this work?

Each column is given a minimum width of 250px. If there is extra space beyond 250px, the columns will expand to fill the space. If the space is reduced, the number of columns will decrease accordingly.

Extras

We can limit the number of columns by setting the layout to a maximum of X columns:

.photos {
  columns: 250px 2;
  ...
  ...
}

Using

columns
is not limited to masonry image layouts alone. We can also use it to style text columns: same CSS, different content.

Final thoughts

Was this helpful?
What was your use case?