Normally, to create a masonry grid, you need a bunch of Javascript. But all you really need is just 1 line of CSS… watch the video and / or read the article below the video.
Step 1: add a blank div (or unstyled container element)
First of all, you need a blank div. I’m using the div block from Greenshift, but you can use any builder that offers an unstyled container element. I have just added a bunch of core image blocks to my container div, and they’re all stacked below each other by default as you would expect.
Now, we only have to add 1 line of CSS to make it a masonry layout. We need a custom CSS area for that. Greenshift has a built-in custom CSS area with a dynamic placeholder (just like Bricks), but if you use core blocks or a page builder that doesn’t offer this, you might have to add a custom class and add the custom CSS in the designated area for that.
Step 2: add 1 rule of css
So what is this magical 1 rule of css to create a masonry grid?
.your-class-name-here {
column-count: 3;
}Yup, it’s really that simple. You just put in “column-count:”, and then the number of columns you want. In my case, I want 3 columns, but you can use any number you want.
I’m using CSS columns here, which will automatically divide all the content in a container in to nice (more or less) equal height columns. It’s mainly used to spread large texts over multiple columns, but you can use it to create a simple masonry layout too!
In my case, I’m using only images, but you can put whatever you want in there. Text, headings, lists, video… it will all be spaced out in even columns with that 1 simple line of css.
Spacing between columns and items
It even gets better; if you use column-count, the browsers automatically adds a 1em space between the columns! However, you can change that value by specifying a column-gap like this:
.your-class-name-here {
column-count: 3;
column-gap: 40px;
}That will add a 40px gap between the columns. Of course, you can use any value you want here.
So what about space between the items in each column? If you’re familiar with flexbox and CSS grid, you know there’s also a row-gap… but unfortunately, CSS columns doesn’t support row-gap 🙁
So, instead, we’ll have to add some margin to the items in the container like this:
.your-class-name-here > * {
margin: 0 0 20px 0;
}By using > * I’m targeting all direct children of my container div. So no matter what kind of block I use – images, text, video – it will always use this margin.
Make the masonry grid responsive
We probably don’t want a 3 column grid on tablet and mobile, so we’ll have to add some code to make it responsive. For example, if I want a 2 column grid on tablet, I would use the following code:
@media (max-width: 768px) {
.your-class-name-here {
column-count: 2;
}
}And on mobile, we just want 1 column:
@media (max-width: 460px) {
.your-class-name-here {
column-count: 1;
}
}Can I use this technique for a query loop?
Yes, absolutely! However, most query loop builders add a default display style (most of the time grid) that you will have to set to block (or inline-block). Sometimes, you can do that in the builder itself, but sometimes you’ll have to use custom CSS. So that can be a bit tricky.
So for example in my case, Greenshift uses a <ul> set to diplay:grid; by default. So I’ll have to overwrite that like this:
.your-class-name-here ul {
display: block;
column-count: 3;
}