Creating A Responsive Masonry Layout Using The CSS column-count Property
Published: 2020-07-09 10:31:49

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.
```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`.
```CSS
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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n6rw7maconglq9f8k1gx.jpg)

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.
```CSS
img{
  width: 100%;
  margin-bottom: 1rem;    
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4rgmiafbvp3gw8tsd4m8.jpg)
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.
```CSS
@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.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uiy45xw7gd9r50z0z746.gif)

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
```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
```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;
  }
}
```