Creating A Responsive Masonry Layout Using The CSS column-count Property

A masonry layout turns out to be a perfect choice for websites with images as their 'highlight'. Two such websites that make the best use of a masonry layout are 'Pinterest' and 'Unsplash'.

One of the best ways to create a responsive masonry layout is to use CSS Grid. However, if for some reason, you do not wish to use CSS Grid and are looking for a comparatively quicker solution, the CSS column-count property can help you out.

So, let's quickly have a look at the code starting with the HTML.

<div class="container">
        <div><img src="https://source.unsplash.com/200x330"></div>
        <div><img src="https://source.unsplash.com/300x380"></div>
        <div><img src="https://source.unsplash.com/300x200"></div>
        <div><img src="https://source.unsplash.com/200x300"></div>
        <div><img src="https://source.unsplash.com/200x400"></div>
        <div><img src="https://source.unsplash.com/280x350"></div>
        <div><img src="https://source.unsplash.com/200x360"></div>
        <div><img src="https://source.unsplash.com/200x300"></div>
        <div><img src="https://source.unsplash.com/250x320"></div>
        <div><img src="https://source.unsplash.com/200x200"></div>
        <div><img src="https://source.unsplash.com/200x330"></div>
        <div><img src="https://source.unsplash.com/200x340"></div>
        <div><img src="https://source.unsplash.com/200x350"></div>
        <div><img src="https://source.unsplash.com/200x250"></div>
   </div>

In the above code, we simply have a div with a class of container. Wrapped inside this div are 14 images with different heights and widths. All of these are placeholder images from Unsplash, which is without a doubt, one of the best websites for free images.

Moving to the CSS, let's first add a few styles to the body and the div that has the class of container.

body{
    background-color: #111;
}

.container{
  padding: 1rem;
  column-count: 4;
}

So, we've added a background color to the body, some padding to the .container div and, most importantly, defined the number of columns for our layout.

However, in the image above, notice that the images are not occupying the entire width of the column that they are placed in. So, let's give each of these images a width of 100% and also a little bit of margin at the bottom.

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

And now, we have a decent looking masonry layout. But, if we resize our browser and move to the smallest screen-size, we would still have 4 columns. So, let's add some media queries.

@media only screen and (max-width: 1000px){
  .container{
    column-count: 3;
  }
}

@media only screen and (max-width: 800px){
  .container{
    column-count: 2;
  }
}

@media only screen and (max-width: 400px){
  .container{
    column-count: 1;
  }
}

And our simple responsive masonry layout is ready.

No doubt, there are several other ways to achieve the same results. However, if you are looking for a quick solution for a not-too-complex-layout, the CSS column-count can do the trick for you. Below is the complete code.

HTML

<div class="container">
        <div><img src="https://source.unsplash.com/200x330"></div>
        <div><img src="https://source.unsplash.com/300x380"></div>
        <div><img src="https://source.unsplash.com/300x200"></div>
        <div><img src="https://source.unsplash.com/200x300"></div>
        <div><img src="https://source.unsplash.com/200x400"></div>
        <div><img src="https://source.unsplash.com/280x350"></div>
        <div><img src="https://source.unsplash.com/200x360"></div>
        <div><img src="https://source.unsplash.com/200x300"></div>
        <div><img src="https://source.unsplash.com/250x320"></div>
        <div><img src="https://source.unsplash.com/200x200"></div>
        <div><img src="https://source.unsplash.com/200x330"></div>
        <div><img src="https://source.unsplash.com/200x340"></div>
        <div><img src="https://source.unsplash.com/200x350"></div>
        <div><img src="https://source.unsplash.com/200x250"></div>
   </div>

CSS

body{
    background: #111;
}

.container{
  padding: 1rem;
  column-count: 4;
}


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



@media only screen and (max-width: 1000px){
  .container{
    column-count: 3;
  }
}

@media only screen and (max-width: 800px){
  .container{
    column-count: 2;
  }
}

@media only screen and (max-width: 400px){
  .container{
    column-count: 1;
  }
}