CSS Only Masonry Grid

Hey! So I have been creating the portfolio site for my brother who is a Graphic Designer and i wanted to create a section in the site where i can showcase all his artwork. From the start i knew i wanted to create a masonry grid which looks good and it also suited the style of artwork he created.

I am creating the site using Astro js and Tailwind CSS, so i thought i would use some library that would calculate the height of the image that i provide and then set it in the grid. Now in terms of Masonry Grid there are many libraries but the problem was that there was not a library that handled the difference of the height and using the library means i had to follow a specific structure that the library wanted me.

So clearing all the previous notions i started looking for a CSS only or JS only solution, without any Library involved. and i then i found this CSS property that would make easy to create the masonry grid.

That CSS Property is columns, using this property we can define numbers of column in which we can divide content in a container. Best part is when we use it with images it will separate the images in the columns we declare without caring about the height of the image and stacks them over each other.

Now let's look at the code a little.

This is the HTML we are working with, its only few images that i got from unsplash

<div class="mgrid-container">
  <div>
    <img src="https://images.unsplash.com/photo-1708538419880-13b82218b976?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1708246118550-dd746a0b43e4?q=80&w=2027&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1708361089093-beef4c4584e7?q=80&w=2016&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1707345512638-997d31a10eaa?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1708514193930-2977def8669a?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1707727726616-2db19ad7e6b1?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1635408929112-150739b59de4?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
  </div>
</div>

Now we can define the CSS, to divide this structure into a grid of 3 columns.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img{
  width: 100%;
  height: 100%;
  display: block;
}

.mgrid-container {
  columns: 3;
  gap: 0;
}

and with that our masonry grid is done!

If you noticed we define the gap: 0; after declaring the grid i had to define the gap because by default there was some gap added which separated the columns.

now using the gap it only defines the gap between the columns and not the gap between rows so that needs to be noticed.

This is the final output that i wanted in my brother's website using Tailwind Classes

Conclusion

Main advantage using this approach is that i am not bound to use any specific structure that library needs me to.

Also in responsive mode i can use the media queries to change the amount of columns which is very easy.

check the mdn docs here