CSS Easy Masonry Grid

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
The problem with these masonry scripts has always been they work great for images but once you try to use it with a div and or tables of data, it completely fails unless theres a fixed width container / children (ie: not responsive)
I'd love to see a tutorial on that - I've used dozens of masonry scripts and they never work right for div children
Hey Mario,
Your absolutely right, let me put it on my backlog and see what I can do. Is there a specific content you are looking to see as a demo or just a random news site?
Daily Dev Tips just a generic everyday 10+ divs on a page with title, sub title and body content of varying length. The content shouldn't matter though. What matters is variable length data (text, table data, whatever) in the div and stack properly.
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

Today we are going to look into making a straightforward CSS Masonry grid.
For those who don't know what a Masonry grid is, it's a grid where items that are not equal in size match up.
Back in the days, this was quite hard to achieve, and you had to use some bloated JavaScript framework to accomplish this.
Nowadays, we can make it with very little use of CSS.
<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 in it.
.masonry {
column-count: 3;
column-gap: 0;
}
.masonry img {
display: block;
max-width: 100%;
}
Yes, that's all! We define 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.
The browser support for column-count is actually impressive!
IE10+, and all major browsers.
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter