Love is like a brick. You can build a house, or you can sink a dead body.
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.
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.