R34: How to use CSS Grid with Divi’s Feed Modules

Last week I showed you how to use CSS Grid in Divi to display modules in any number of columns and/or rows and in any order, regardless of how you have them set up in the backend.

This method works great for single item modules such as images, blurbs and CTAs. But what about when you want to use Divi’s feed modules like the blog, gallery and portfolio? As these modules pull their content from posts, the media library and projects, they need a slightly different approach.

Today I am going to show you how to use CSS Grid with Divi’s feed modules so you can display your blog, gallery and portfolio items in any number of columns with very minimal CSS.

So let’s get cooking!

Ingredients

The latest version of the Divi Theme from Elegant Themes.

An active child theme. You can add the CSS to Divi’s Theme Options but its not much fun editing it in there!

Cooking time

This should only take around 5 minutes per module.

Preparation

For the prep I highly recommend first reading this post on how to use css grid in Divi for an overview of how this new CSS feature works. This recipe will make a lot more sense once you have a basic understanding of what Grid is

Method

We will start with the Blog module. It is probably the most used out of all the feed modules and I often see questions about changing the number of columns displayed, especially when used on a page with a sidebar. 

By default the Divi blog module, set to grid, will display your posts in 3 columns on a fullwidth page, and 2 columns when using a sidebar. This isn’t always the layout you want, sometimes you would like to retain 3 columns when using a sidebar, or have 4 or 5 columns display when using a fullwidth page.

Let’s make that happen

Add a new section to your page with a single column and add the blog module.

Open up the blog module settings and in the Advanced tab, give the module a CSS Class of ds-grid-blog

Next, in the Design tab, make sure the Layout is set to Fullwidth.

Then click on the Content tab and set the Posts Number to the number of columns you want to display. I am using 5 in this example.

Adjust the remaining settings however you want (categories, meta etc.) then Save & Exit.

The reason we have chosen fullwidth rather than grid for the blog layout is because when we choose grid, Divi adds columns, and we don’t want it to, we are going to do that ourselves with a little CSS.

Now lets add the CSS to get our fullwidth blog layout into columns.

Recently, Elegant Themes added Ajax functionality to the blog module. In doing this they created a new ‘container’ for the posts, and this container is what we are going to target to create our columns.

.ds-grid-blog .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(5, 18%);
    grid-column-gap: 2.5%;
}

First we set the container to display as a grid, then we set the number of columns. I explained about the grid-template-columns property in my previous recipe.  We use that again here to set the number of columns to 5 and the width of each column 18%.

We are also introducing a new property; grid-column-gap. What this property does is add spacing between our columns so they don’t butt up against each other. If you don’t want any spacing then just leave this property out. It can look great when creating galleries as you can see from my demo, but when using modules with text content, you’re likely going to want some spacing.

I think the most useful thing about this property is that it doesn’t add the spacing before the first item or after the last item. It’s smart, and only adds the spacing between columns.

This is how it works:

We have 5 columns so:

100 / 5 = 20

That would mean we need to set our column width to 20%. However, if we also add in spacing then our content will be wider than our container. So a little math is required, what we need is this:

100  – (column spacing x 4) / 5

If we have 5 columns, that equals 4 column gaps (the space between each column), and we need to deduct the total width of those gaps before we set our column width.

So based on 5 columns with a column gap of 2.5%, we get this:

100 – (2.5 x 4) / 5 = 18

So our column width is 18%. This will mean we get nice even spacing but our blog module still spans the fullwidth of the container.

And that’s it. If you don’t have pagination switched on then you will just get a nice 5 column layout. If however, you want pagination on to make use of the new Ajax functionality as I have in my demo, we need one little extra snippet.

You will likely see when you get to the end of your posts, the ‘Next Entries’ link has moved and sits beside your last post rather than at the bottom right of the module.

Here’s how we fix that:

.ds-grid-blog .pagination {
    clear: both;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
}

We are basically just setting the position of the pagination to ‘absolute’ so we can move the links back to the bottom of the blog container.

If you want to use this on a page that has a sidebar, there’s nothing else you need to do. Your blog will still show 5 columns, just confined to the left area of the page. You can see an example here. Its the exact same CSS but I have turned off pagination and set the blog module to display 10 posts instead if 5

Next, let’s take a look at the Portfolio module.

Create a new section with a single column and then add the Portfolio module.

Open up the module settings and in the Advanced tab add a CSS Class of ds-grid-portfolio

Next, in the Design tab, make sure the Layout is set to Fullwidth.

And lastly in the Content tab, set the Posts Number to the number of columns you want to show. I am using 6 in this example. Then Save & Exit.

You can of course adjust the categories, meta and any other settings as you wish.

As with the Blog module, the Portfolio now has Ajax functionality so you can switch on pagination in the Content settings to have your module display in 6 columns but with links to previous and next projects as I have done here.

Our CSS for the Portfolio module is very similar to the Blog module.

.ds-grid-portfolio .et_pb_ajax_pagination_container {
    display: grid;
    grid-template-columns: repeat(6, 15%);
    grid-column-gap: 2%;
    padding-bottom: 50px;
}

.ds-grid-portfolio .pagination {
    clear: both;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
}

We are using the Portfolio’s Ajax container to set our module to display as a grid, have 6 columns at 15% width with a column gap of 2%

The same math applies:

100– (2 x 5) / 6 = 15.

In addition, we have added bottom padding of 50px, this is just to move the pagination down a bit so its less cramped.

The second declaration is the same as we used for the blog module to position our pagination links.

And that’s it for the Portfolio module. Let’s take a quick look at the Filterable Portfolio module.

Set it up exactly the same way as you did the standard Portfolio module but give it a CSS Class of ds-grid-portfolio-filter

Then the only CSS you need is this:

.ds-grid-portfolio-filter .et_pb_portfolio_items {
    display: grid;
    grid-template-columns: repeat(6, 15%);
    grid-column-gap: 2%;
}

The pagination for the Filterable Portfolio is different to the standard Portfolio, and it works just fine without any adjustments. Take a look here.

Lastly, the Gallery module.

I often see people asking how to change the number of columns in their galleries and I have shown another way to do this using the column-count property, and have it display in a masonry layout in my membership Club at Divi Academy.

But lets do this using the Grid.

Add a new section with a single column and then add the Gallery module.

Open up the module settings and in the Advanced tab, add a CSS Class of ds-grid-gallery

In the Design tab make sure the Layout is set to Grid (there is no fullwidth option here but we don’t want to use the slider).

Then in the Content tab set the number of images you want to display and click Update Gallery to add your images via the media library.

The Images Number value doesn’t have to be the same as the number of columns you want to show, unless of course you only want to display a single row of images. You can set any number and the Grid will just add more rows until it displays all of your images. You can also turn on pagination if you wish.

There is one final optional adjustment. If you want a gutterless gallery like my demo, then open up the Row settings and make sure Make This Row Fullwidth and Use Custom Gutter Width are set to Yes and Gutter Width is set to 1. Then Save & Exit.

As with our other modules the CSS is pretty minimal:

.ds-grid-gallery .et_pb_gallery_items {
    display: grid;
    grid-template-columns: repeat(8, 12.5%);
}

.ds-grid-gallery .et_pb_gallery_item {
    width: 100% !important;
    margin: 0 !important;
}

We set the container to display as a grid and then add in our columns. For the gallery I have used 8 columns at a width of 12.5% (100 / 8).

As I wanted a gutterless gallery, I haven’t added the grid-column-gap property, but you can add this in if you want some spacing and use the calculations mentioned previously to set the gap width and adjust the columns width accordingly.

The second declaration makes sure our gallery images span the entire width of their columns. I have removed the margin on the gallery items here so there is no space between rows, but if you aren’t designing a gutterless gallery, you will want to change that to add some bottom margin to your images.

And that’s it for the Gallery!

What about responsiveness?

Its slightly different with the the feed modules. As they require a value to tell them how many items to display per page we have two options:

If you are happy for the rows to stack on smaller screens, so for instance a blog module that displays 6 posts in a single row on desktop, will show 2 rows of 3 posts on tablet, then you only need to add media queries.

If however, you want to limit the number of posts displayed to 3 on tablet, so only a single row is displayed, you will want to duplicate your module, give it a new CSS Class, adjust the number of posts to display, and then set each of those modules to show or hide. You will then want to create new CSS declarations with the new CSS Class and set the number of columns and column width for those device sizes.

For simplicity, we are going to show the same number of items on tablets and mobile, just in more rows.

The toggle below has all the CSS you need for my examples, broken down into separate sections for each type of module.

All we are doing here is redefining the columns and column gaps at various breakpoints. You can change the breakpoints and even add in more, for instance for small laptops (around 1280px).

The only additional declaration in the media queries is for the Gallery module. We need to override the 3 column layout Divi applies for tablets as this will set our images to display at 1/3 of the column width, so we just make sure they stay at 100% width by adding:

.et_pb_gutters1 .ds-grid-gallery .et_pb_grid_item:nth-child(n) {
    width: 100% !important;
}

And that’s it!

As I explained in last week’s recipe, IE & Edge do not support CSS Grid fully, so you will also want to take a look at this section for what to do as a fallback.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X