R33: How to use CSS Grid in Divi

I’ve been creating a lot of layouts recently that require breaking out of the constraints Divi imposes through its 4 column layout limit.

There are a number of ways to achieve this; the built in column shortcodes, specialty sections, floats, flexbox and even plugins.

But the single most powerful and more importantly, fun way to do this is to use CSS Grids.

I’m in love with CSS Grids. Seriously, this relatively new CSS3 functionality is going to change your life!

Ok, maybe it’s not going to change your life, unless you’re a nerd like me. But it’s definitely going to change the way you use Divi.

Imagine any number of columns, with any module or modules spanning single or multiple columns and rows, all whilst remaining perfectly aligned and responsive.

Did I mention this is going to change your life? 😉

There is one downside however. And as usual Microsoft are to blame.

You guessed it! No support in IE or Edge. Well that’s not entirely true. You can use the -ms- vendor prefix but it’s an outdated version of the CSS Grid and after playing with it for some time, I’m not impressed.

All is not lost though. It’s on the development schedule for Edge and I believe support is due in the next major release.

So, considering its short comings, impending Edge support and the fact that I break out in a sweat if I have to even open IE, I’ve opted to include a JS snippet to detect the browser and display a different section for these two sub-par browsers. One of which can be removed when Edge support arrives.

Oh, and Opera mini doesn’t support it either. Know anyone who uses that?

No, me either

In this recipe, rather than showing you how to create something specific which may not fit your needs, I am going to show you how to use CSS Grid in Divi so you can create what you need yourself. I won’t cover all of the properties available, rather just what you need to create a grid and place your grid items. For more info on all the properties and terminology you can check out this article.

But I did whip up an example you can view (and download) by clicking the button below. Be sure to resize your browser to see what happens when the media queries kick in.

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

Depends how quick you learn

Preparation

Before we start let me explain a little about CSS Grid.

CSS Grid, otherwise known as ‘Grid’ is a grid based layout system designed to allow us to structure webpages in a much more flexible way.

It’s two dimensional (rather than one dimensional like Flexbox), which means it gives us the ability to define the layout of our content both horizontally and vertically.

What’s even better is it allows us to literally place an element in a specific location in the grid, and when used with media queries, change that position on different device sizes.

Grid requires a parent container (the grid) and child elements (the grid items).  

In Divi, grid items would be our modules, which we will need to place in a column, and the column would be our grid.

Grid = Column
Grid Items = Modules

Divi already provides the ability for us to create columns, but this is limited to 4 (unless using column shortcodes or one of the other methods mentioned previously). But none of these methods allow for a two dimensional layout whereby we can have modules span multiple columns and/or rows, whilst still allowing the other modules to occupy single columns and/or rows.

Essential Grid and The Grid, are a couple of the ‘go to’ plugins if you want to create a layout Divi doesn’t allow out of the box. What I’m telling you now is, with CSS Grid, you don’t need them anymore!

Let’s say we want our grid to consist of six columns and three rows. It would look like this:

The lines are called ‘Grid Lines’. 1 – 7 are for the columns and 1 – 4 are for the Rows.

By using the numbers of the grid lines in our CSS, we will be able to place our grid items in a specific grid cell, or span a number of grid cells to create an irregular layout.

Let’s try it!

Method

We’re going to create this grid. It will consist of 6 modules (the blue ones) each spanning a single grid cell (1 column and 1 row), and 2 modules (the green ones), each spanning six grid cells (3 columns and 2 rows).

So we need to create a new section with one row and a single column.

Now open up the Row settings and in the Advanced tab, give the Column a CSS class of ds-grid (this is our grid)

Be sure to add this to the Column CSS Class field and not the CSS Class field. Then Save & Exit.

Now we are going to add our modules. We need 6 spanning a single cell and 2 spanning multiple cells, so we need 8 modules in total.

These can be any modules but you’ll probably want to avoid modules that use feeds (like the blog, portfolio and gallery modules). You can use them but they will require quite a bit of tweaking which is beyond the scope of this recipe. If you do want to use Grid with feed modules, check out Recipe #34 – How to use CSS Grid with Divi’s Feed Modules.

I am going to use the text module for simplicity. Add your module, adjust the content as needed and then in the Advanced tab, give the module two classes of ds-grid-item and ds-grid-item1 separated by a space (this is a grid item).

Now, create your other 7 modules, either by duplicating and editing the first, or if you want different types of modules, create those and be sure to add the CSS classes and increment the ds-grid-item1 class by 1 for each module:

Module 1: classes = ds-grid-item ds-grid-item1
Module 2: classes = ds-grid-item ds-grid-item2
Module 3: classes = ds-grid-item ds-grid-item3
Module 4: classes = ds-grid-item ds-grid-item4
etc…

When finished, you should have a single row, with a single column containing 8 modules.

It doesn’t matter which order you place the modules in the column, but I try to keep them in the order they will appear on the page so they are easier to find when they need editing.

This is what our layout looks like on the frontend at the moment:

Now lets start constructing the CSS for our grid.

We used the class ds-grid for our grid container, so we need to tell that container we want it to display as a grid, and we also want to define the number of columns and rows.

.ds-grid {
    display: grid;
    grid-template-columns: repeat(6, auto);
    grid-template-rows: repeat(3, 200px);
}

So here we are telling the column to act as our grid container, the grid to consist of 6 columns with a width of auto (they will be equal widths), and 3 rows with a height of 200px each. You can change the 200px to auto as well, I have just added a height as I don’t have much content so that would mean the middle row would look collapsed if I didn’t add more content to make the modules spanning multiple grid cells taller.

We could also leave these out the grid-template-columns and grid-template-rows properties, in this case we don’t have to adjust the values if we want more or less grid cells later on, we would just need to define the position in the grid and the cells would be automatically generated. You can try it with and without those properties and see what works best for your layout.

So now lets generate our grid cells.

We used 2 classes on the modules (the grid items), and the one we need now is the one with number of the module appended, so ds-grid-item1, .ds-grid-item2, .ds-grid-item3 etc.

We are going to create a CSS declaration for each of these grid items and then ‘place’ them in the grid using the grid line numbers:

.ds-grid-item1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.ds-grid-item2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.ds-grid-item3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.ds-grid-item4 {
    grid-column: 4 / 7;
    grid-row: 1 / 3;
}

.ds-grid-item5 {
    grid-column: 1 / 4;
    grid-row: 2 / 4;
}

.ds-grid-item6 {
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}

.ds-grid-item7 {
    grid-column: 5 / 6;
    grid-row: 3 / 4;
}

.ds-grid-item8 {
    grid-column: 6 / 7;
    grid-row: 3 / 4;
}

As you can see, for each grid item we assign 2 values separated by a forward slash to both the grid-column and grid-row properties.

The values are the grid line numbers, and they tell our grid items how many cells they should span, and in which direction.

So ds-grid-item1 for example, spans from column grid line 1 to column grid line 2, and from row grid line 1 to row grid line 2. This results is the grid item spanning a single column and a single row, which is equal to a single grid cell, and the placement of that grid item is top left.

But if you take a look at ds-grid-item4, it spans from column grid line 4 to column grid line 7, and from row grid line 1 to row grid line 3. This results in the grid item spanning 3 columns and 2 rows, which is equal to 6 grid cells, and the placement of that grid item is top right.

Without any further styling, it will look something like this on the frontend:

Now, in order for our background to span the whole cell, we need to remove the margin: auto; property Divi adds automatically and also reverse a media query which adds some bottom margin. You can do this in each module’s design settings, but as we already have the class ds-grid-item applied to all of our modules, lets go ahead and use that as its quicker:

.ds-grid-item {
    margin: 0;
}

@media all and (min-width: 981px) {
 .et_pb_gutters3 .et_pb_column_4_4 .ds-grid-item.et_pb_module {
 margin-bottom: 0 !important;
 }
}

Now we are getting closer:

You may end up having a different amount of content in each module, and if you’re anything like me you like things vertically centered. Flexbox works great with CSS Grid so lets use that to align the contents of our grid items.

.ds-grid-item {
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media all and (min-width: 981px) {
    .et_pb_gutters3 .et_pb_column_4_4 .ds-grid-item.et_pb_module {
        margin-bottom: 0 !important;
    }
}

Here we have added the relevant flex properties to the declaration we wrote earlier to remove the margin. We have also added a little padding to the modules so our content has some breathing space.

And that’s pretty much it for our basic grid layout. Looks pretty doesn’t it?

Now as I mentioned previously, one of the best things about using CSS Grid is that we can place our grid items anywhere in the grid. This means that combined with media queries, we can easily redefine the grid size and the location of the grid items on various device sizes.

Let’s write a media query to display the grid like this when the screen size hits 980px wide:

We will take our grid container and numbered grid item declarations, place them inside a media query and then adjust the grid-column and grid-row values to move our modules to the layout in the image above.

@media all and (max-width: 980px) {
    .ds-grid {
        grid-template-columns: repeat(3, auto);
        grid-template-rows: repeat(6, 200px);
    }
    .ds-grid-item {
        margin: 0 !important;
    }
    .ds-grid-item1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .ds-grid-item2 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .ds-grid-item3 {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }
    .ds-grid-item4 {
        grid-column: 1 / 4;
        grid-row: 2 / 4;
    }
    .ds-grid-item5 {
        grid-column: 1 / 4;
        grid-row: 5 / 7;
    }
    .ds-grid-item6 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    .ds-grid-item7 {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
    }
    .ds-grid-item8 {
        grid-column: 3 / 4;
        grid-row: 4 / 5;
    }
}

If you take a look at the grid-template-columns and grid-template-rows properties, you can see we have adjusted the columns to 3 and the rows to 6. We have also included the declaration to remove the margin from the grid items as otherwise Divi will add unwanted spacing between them. 

Now, when you resize your browser down to below 980px wide you will see the layout had automatically adjusted like this:

The toggle below contains the complete CSS used in this example.

Now all you need to do is duplicate the media query we just created, adjust the breakpoint, grid-template-columns and grid-template-rows properties to adjust your grid layout for different screen sizes, and then amend the grid-column and grid-row values for each of the grid items within those media queries to place your modules in whichever position you like.

You can even completely change the number of columns and rows each module spans on different screen sizes to create a totally different appearance. Cool eh?

Update: I have removed the condition for Edge from the JS snippet below as CSS Grid is now supported in Edge 16 (as of October 2017)

I mentioned in the introduction that IE and Edge don’t currently doesn’t support CSS Grid, but it would be a terrible shame for all the people using sensible browsers not to benefit from the beautiful layouts you can create with this feature.

Therefore I put together a JS snippet to show/hide our grid section, and a substitute section based on the users’ browser.

Copy and paste the following code into Divi > Theme Options > Integration > Add code to the < head > of your blog.

<script type="text/javascript">
(function($) {
$(document).ready(function() {

if (/MSIE 10/i.test(navigator.userAgent)) {
 $("#ds-grid-ie").removeClass("ds-hide");
}

else if (/MSIE 9/i.test(navigator.userAgent) || /rv:11/i.test(navigator.userAgent)) {
 $("#ds-grid-ie").removeClass("ds-hide");
}

else {
 $("#ds-grid-other").removeClass("ds-hide");
}
});
})(jQuery)
</script>

And also add this CSS to your child theme stylesheet or wherever you like to add your CSS (it’s already included in the Full CSS from the toggle):

.ds-hide {
    display: none;
}

Once we add the IDs and classes to our sections, the JS will basically remove the ‘ds-hide’ class from a section depending on the browser being used, so that only the appropriate section is displayed.

Next, open up the section containing your grid and in the Advanced tab, add an ID of ds-grid-other and a Class of ds-hide

Now below your grid section, add a new section and in the Advanced tab, give it an ID of ds-grid-ie and a Class of ds-hide

You can then add any content to that section and style it how you like. This section will display if the user views in IE or Edge, and your CSS Grid section will display in all other browsers.

You can check how that works by viewing my demo in different browsers.

So now you can make the most of beautiful, flexible layouts without the usual Divi constraints

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

Michelle X