Subscribe

CSS Easy Masonry Grid

✍️

A super easy way of making a masonry grid

14 May, 2020 · 2 min read

Today, we will look into making a straightforward CSS Masonry grid. Those who don’t know what a Masonry grid is are a grid where items that are not equal in size match up. This was quite hard to achieve back in the days, and you had to use some bloated JavaScript framework to accomplish this. Nowadays, we can make it with very little CSS use.

HTML Structure

<div class="masonry">
  <img
    src="https://images.unsplash.com/photo-1551675705-72513c2722a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"
  />
  ... More images
</div>

As you can see, I tried to keep it as simple as possible by only using one masonry container and adding several images to it.

CSS Masonry

.masonry {
  column-count: 3;
  column-gap: 0;
}
.masonry img {
  display: block;
  max-width: 100%;
}

Yes, that’s all! We defined a column-count which will make 3 columns, and I added a gap of 0 to make it look better. Then each image, we give a max-width so it doesn’t break out.

View and play with this demo on Codepen.

See the Pen CSS Easy Masonry Grid by Chris Bongers (@rebelchris) on CodePen.

Browser Support

The browser support for column-count is actually impressive! IE10+, and all major browsers.

View on caniuse

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Modifying an SVG path with CSS

10 Dec, 2022 · 2 min read

Modifying an SVG path with CSS

Animate an SVG path with CSS

9 Dec, 2022 · 2 min read

Animate an SVG path with CSS

Join 2099 devs and subscribe to my newsletter