Just Another Brick…
Love is like a brick. You can build a house, or you can sink a dead body.
Lady Gaga
So the fine people of Divi nation (more specifically, those who subscribe to the Divi Theme Tutorials Facebook page) have requested a tutorial on how to implement a masonry layout in Divi from Elegant Themes. This tutorial will be split into two parts. In this first part I’ll show how you can easily accomplish this using HTML in the code module and some CSS. In the second part I’ll show you how this can be accomplished using the javascript library Masonry.js.
Fair warning before we dig in. While I’ve been working with web design for awhile, I’m relatively new to using Divi, so there could be better alternatives for accomplishing this same output.
Many times you have a gallery of images that you want displayed in equal width columns, but without them getting cut off, or resized in an odd manor – masonry display to the rescue. There are many different ways to accomplish this and the one I’ll be presenting today is probably the most lightweight way to accomplish this effect. However, it does require a bit of work on the part of the designer to display a large amount of images. At the end of this section of the tutorial I’ll talk about how you could potentially speed this process up.
First up, slot a full-width code module into your favorite row. The code to the right is the basic structure we will be using for constructing our masonry content. It has two different, unique IDs that we will target using some custom CSS later. The first ID tags a container (<div>) for an unordered list. The second creates a selectable tag for the unordered list itself (<ul>). I have presented it here with nice indentation, but I’ve found that I occasionally get odd results with Divi when I don’t collapse the indentation, so when you put it into your code module just end lines with a simple return, and don’t add tabs at the beginning.
Next up, we are going to add in our content. Using this method is a little tedious since you have to insert the media links by hand into the <img> src field. To get the URL for each image, navigate to your media library. Click on an image you want to put into the masonry display to pull up the info window. Copy the top line labelled “URL” and then paste it in between the “” of the src field of your list image. Duplicate this process adding new <li>…</li> into your HTML, making sure not to delete the closing </ul> tag at the very end of the whole list. So in the end, here is what my code looked like:
Okay, now that the HTML section is complete it is time to move onto the CSS portion. It is up to you whether you put it into a child theme style sheet, or the Divi Custom CSS panel. Here we are going to take advantage of a CSS native property called, “column-count.” I should note at this point that while most modern browsers can handle this CSS property, IE only introduced support
in version 10. First up, we add some styling to the overall container by targeting it with “#masonryContainer” (remember that “#” targets IDs in your HTML, while “.” targets classes). Column-count requires that a width be set. In this case I’m using a percentage. If you prefer, you can set a specific width, but then you will also have to set up media queries to make it responsive. I should also say that you probably want to set up a media query to reduce the number of columns on smaller devices even if you have the width set as a percentage. I also have one other styling inserted that compensates for a bug in the Chrome browser that I will come back to in the next section.
Next comes the magic. We have two different stylings applied to the unordered list we created. The first is “column-count”. This tells the browser to set the width of the incoming list item in order to fit X number of columns in the given width. In this case I set it to 4 columns, but you can feel free to change this to any number that is aesthetically pleasing. To add support all browsers we have to use the “-moz-” prefix for support of Firefox, and the “-webkit-” prefix for support of the Android Chromium browser. All other browser support this styling without prefix. There is a known bug with Chrome calculation of column width that can be (mostly) overcome by setting the perspective of the container to 1.
The next important styling is column-gap, which does exactly what you think it would, sets a gap between adjacent images. Again, you can adjust this till it is visually pleasing. Finally, I’ve also set the “list-style” to none so that the bullets don’t show up at the beginning of each row.
Lastly, I put some styling onto each of the list items to get them to stack a little more nicely. You can alter this to your taste. You could also add a border with border-radius to round the corners, or alter the styling to make the display a little more visually interesting. Another aspect to using this method is image ordered. Your HTML will load them in starting with the first list item, putting the second list item below the first until the height of the next list item would excede the overall max column height. It then places the next image in the list at the top of the next column next to the very first list item. Sometimes rearranging the order you put them into the list can create a more harmonious grid.
If anything isn’t clear, please drop me a comment or e-mail. I’m more than willing to re-write this or extend it to help someone out. Stayed tuned for the second half of this tutorial which will use javascript to accomplish the same thing.
Note: Many of the links on my site are affiliate links that pay me a commission if you buy something after you click through. This is at no cost to you, but helps me out. Thanks.
Hello Hello !!
I think you might be my savior !!
I want to make a DIVI Gallery with irregular number of columns, masonry style. I tried a lot, I even bought 4DIVI Mansory Gallery module ( 9$ no big deal ) but cannot figure out how to make the style I want.
I explain : I want some rows with 4 or 5 pictures and other rows with 2 pictures. Everything fullscreen. And in one image gallery.
Please take a look at the website: https://www.hubertime.com/collection
I want the gallery to be the same as the second section (just under the fullwidth header with the title COLLECTION ) but I want it full screen. 4 portrait pictures on top and then 2 landscape above.
I want like 3 rows with 4 portrait pictures and then 1 row with 2 landscape and again. more than 30 pictures in total. Is it possible?
I only succeed to do some 5 pictures row and 3 pictures row or 3 pictures row then 2 pictures raw.
Please help me.
I’m a noob in coding HTML and CSS but I handle DIVI good, and I can make some basic codes or some copy/paste codes with instructions like your post.
Actually I didn’t try to do it with your tutorial here cause I’m not sure it ll be what I need.
You will tell me.
Thanks in advance for your answer !
Best regards
Yacine
Hi Yacine,
This should be relatively easy using the masonry.js library. Things have changed up a bit since I first wrote this tutorial, but the steps are largely the same. The only difference is that instead of putting each item in a <li> you can put each item in a <div>. Put your images into each div in the order you want them to appear. You can think of each row on the screen having a total of four slots for pictures. You small pictures will take up 1 slot, while your big pictures will take up 2 slots. Give your small pictures a class of “grid-item” and your large pictures classes of “grid-item” and “grid-item–width-2”. In order to use relative sizing like this, you will have to put an extra <div> at the top with a class of “grid-sizer”. Then in your CSS you can set “.grid-sizer, .grid-item{width: 25%;} .grid-item–width-2{width: 50%;}.
HTML
CSS
you might need to fool around a little with the percentages. You might also need to set a height for your grid-item.
JavaScript
Hope this helps! Just reach out if you need anything else.