Create Custom Divi Column Structures In Mobile Devices With CSS Grid

Divi comes with a wide array of column structures for beautiful desktop designs. In this tutorial, we are going to unlock these flexible column layouts for mobile devices (phone and tablet) as well using responsive CSS grid.

Do you you miss the flexible Divi row layout options when designing for mobile? I sure do, so I decided to create a CSS grid system that allows custom column structures in ALL devices. In this tutorial, we are going to apply both equal width column structures as well as mixed column widths combinations. You don’t need any plugins and it works flawless in all modern web browsers. I hope that you will enjoy this brand new toolbox for responsive row design in Divi!

The result: Our custom column layouts library

Here are the new responsive column structures that we are going to unlock for phones and tablets.

Equal Column Widths (Mobile & Tablet)

• 1 column on tablet
  This is useful if you want to prevent Divi from displaying for example three columns on tablet when displaying six columns on desktop.2 columns on tablet.
• 3 columns on tablet
• 4 columns on tablet
• 5 columns on tablet
• 6 columns on tablet

Before we start: Why you’ll see an error message in backend and why you should ignore it

When you add the CSS below in the Divi Theme Customizer, you will see an error message stating:

There are X errors which must be fixed before you can save.

So am I trying to break your site or what? Of course not, this CSS code works perfect in Divi and it’s supported by all modern web browsers. If you test it in the W3C CSS Validator tool, you’ll get a perfect score:

The reason that you will see the warning in the Theme Customizer is that WordPress uses an obsolete validation service called CodeMirror that hasn’t been updated with the latest CSS standards. The false warning is about the CSS grid unit “fr” (fraction) which works flawless with WordPress and Divi. This fact has been discussed in the official Divi Theme Users Facebook group:

How to bypass the false error message

So to go on and unlock the custom column structures in Divi, simply tick the checkbox “Update anyway, even though it might break your site?” and click “Publish”. Nothing bad will happen, I promise. This is also the recommended solution provided by the Elegant Themes support:

Step 1. Add CSS for custom mobile column structures in Divi

Let’s begin! First you need to add some custom CSS to unlock the custom mobile row structures in Divi.

1. Log in to your WordPress dashboard
2. Go to Divi » Theme Customizer » Additional CSS
3. Copy and paste the CSS below:

   /*** Custom Divi Row Structures For Mobile Devices By VictorDuse.com ***/
   
   /* Global CSS */
   @media screen and (max-width: 980px) {
   html .et-db #et-boc .dm-row {
       display: grid;
     }
   html .et-db #et-boc .dm-row.et_pb_row:after {
       content:none;
     }
     html .et-db #et-boc .dm-row .et_pb_column {
       margin-right: 0;
       width: auto;
       margin-bottom:0;
     }
   }
     
   /* Set GAP size between columns for phone devices */
   @media screen and (max-width: 767px) {
     .dm-row {
       gap: 15px;
     }
   }
   
   /* Set GAP size between columns for tablet devices */
   @media screen and (max-width: 980px) and (min-width: 768px) {
     .dm-row {
       gap: 20px;
     }
   }
     
   /* Two equal columns mobile */
   @media screen and (max-width: 767px) {
     .dm-2-col-mob {
       grid-template-columns: repeat(2, 1fr);
     }
   }
    
   /* Two equal columns tablet */
   @media screen and (max-width: 980px) and (min-width: 768px) {
     .dm-2-col-tab {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   
   /* Three equal columns mobile */
   @media screen and (max-width: 767px) {
     .dm-3-col-mob {
       grid-template-columns: repeat(3, 1fr);
     }
   }
   
   /* Three equal columns tablet */
   @media screen and (max-width: 980px) and (min-width: 768px) {
     .dm-3-col-tab {
       grid-template-columns: repeat(3, 1fr);
     }
   }
   
   /* Four equal columns mobile */
   @media screen and (max-width: 767px) {
     .dm-4-col-mob {
       grid-template-columns: repeat(4, 1fr);
     }
   }
   
   /* Four equal columns tablet */
   @media screen and (max-width: 980px) and (min-width: 768px) {
     .dm-4-col-tab {
       grid-template-columns: repeat(4, 1fr);
     }
   }
   
   /* Five equal columns mobile */
   @media screen and (max-width: 767px) {
     .dm-5-col-mob {
       grid-template-columns: repeat(5, 1fr);
     }
   }
   
   /* Five equal columns tablet */
   @media screen and (max-width: 980px) and (min-width: 768px) {
     .dm-5-col-tab {
       grid-template-columns: repeat(5, 1fr);
     }
   }
   
   /* Six equal columns mobile */
   @media screen and (max-width: 767px) {
     .dm-6-col-mob {
       grid-template-columns: repeat(6, 1fr);
     }
   }
   
   /* Six equal columns tablet */
   @media screen and (max-width: 980px) and (min-width: 768px) {
     .dm-6-col-tab {
       grid-template-columns: repeat(6, 1fr);
     }
   }
   
   /* 2 columns 1/3 and 2/3 phone */
   @media screen and (max-width: 767px) {
     .dm-2-col-1-2-mob {
       grid-template-columns: 1fr 2fr;
     }
   }
   
   /* 2 columns 2/3 and 1/3 phone */
   @media screen and (max-width: 767px) {
     .dm-2-col-2-1-mob {
       grid-template-columns: 2fr 1fr;
     }
   }
   
   /* 2 columns 1/4 and 3/4 phone */
   @media screen and (max-width: 767px) {
     .dm-2-col-1-3-mob {
       grid-template-columns: 1fr 3fr;
     }
   }
   
   /* 2 columns 3/4 and 1/4 phone */
   @media screen and (max-width: 767px) {
     .dm-2-col-3-1-mob {
       grid-template-columns: 3fr 1fr;
     }
   }
   
   /* 2 columns 1/3 and 2/3 tablet */
   @media screen and (min-width: 768px) and (max-width: 980px) {
     .dm-2-col-1-2-tab {
       grid-template-columns: 1fr 2fr;
     }
   }
   
   /* 2 columns 2/3 and 1/3 tablet */
   @media screen and (min-width: 768px) and (max-width: 980px) {
     .dm-2-col-2-1-tab {
       grid-template-columns: 2fr 1fr;
     }
   }
   
   /* 2 columns 1/4 and 3/4 tablet */
   @media screen and (min-width: 768px) and (max-width: 980px) {
     .dm-2-col-1-3-tab {
       grid-template-columns: 1fr 3fr;
     }
   }
   
   /* 2 columns 3/4 and 1/4 tablet */
   @media screen and (min-width: 768px) and (max-width: 980px) {
     .dm-2-col-3-1-tab {
       grid-template-columns: 3fr 1fr;
     }
   }
   
   /* 3 columns 1/4 and 1/4 and 2/4 phone */
   @media screen and (max-width: 767px) {
     .dm-3-col-1-1-2-mob {
       grid-template-columns: 2fr 2fr 4fr;
     }
   }
   
   /* 3 columns 2/4 and 1/4 and 1/4 phone */
   @media screen and (max-width: 767px) {
     .dm-3-col-2-1-1-mob {
       grid-template-columns: 4fr 2fr 2fr;
     }
   }
   
   /* 3 columns 1/4 and 2/4 and 1/4 phone */
   @media screen and (max-width: 767px) {
     .dm-3-col-1-2-1-mob {
       grid-template-columns: 2fr 4fr 2fr;
     }
   }
   
   /* 3 columns 1/4 and 1/4 and 2/4 tablet */
   @media screen and (min-width: 768px) and (max-width: 980px) {
     .dm-3-col-1-1-2-tab {
       grid-template-columns: 2fr 2fr 4fr;
     }
   }
   
   /* 3 columns 2/4 and 1/4 and 1/4 tablet */
   @media screen and (min-width: 768px) and (max-width: 980px) {
     .dm-3-col-2-1-1-tab {
       grid-template-columns: 4fr 2fr 2fr;
     }
   }
   
   /* 3 columns 1/4 and 2/4 and 1/4 tablet */
   @media screen and (min-width: 768px) and (max-width: 980px) {
     .dm-3-col-1-2-1-tab {
       grid-template-columns: 2fr 4fr 2fr;
     }
   }

    

4. Tick the checkbox beside the false error message “Update anyway, even though it might break your site?”. It will not break your site in any way, shape or form.
   
5. Click the blue Publish button to save the CSS.

Copy the entire CSS snippet to unlock all the additional column structures for mobile and tablet.

Step 2. Add CSS Classes to your Divi Rows to change the number of columns on mobile and tablet

To apply the new column structure for mobile and tablet you need to add the matching CSS class(es) to your Divi row.

1. Enable the Divi Visual Builder on the page that you want to edit
2. Edit the row (that’s the box with the green border) by clicking the cogwheel
3. Go to Advanced » CSS ID & Classes » CSS Class
4. Add the CSS class dm-row and then add one or two more CSS classes, matching the column structure that you want to use, from the list below. Separate the class names with a single space.

The CSS classes should always start with dm-row since that class adds the general grid properties needed. Confused? See the example further below.

Start by adding the class dm-row and then add one or two additional classes to your row settings. Separate the class names with simple spaces, for example: dm-row dm-2-col-1-2-mob dm-2-col-3-1-tab

Start by adding the class dm-row and then add one or two classes to your row settings. Separate the class names with a simple spaces, for example: dm-row dm-2-col-mob dm-4-col-tab

One example on how to use the CSS classes

Bonus #1: Vertically centering the columns

Okey, so the columns are now displayed side by side in mobile devices. But what if you want to vertically center-align the columns? Easy peasy!

1. Click the cogwheel to open the row settings
2. Go to Advanced » Custom CSS
3. Add the CSS below in the Main Element field for tablet and/or phone:

   align-items: center;

That’s it! Save and preview in frontend. I’ve added a black background to each single column in the example below to highlight the effect:

Bonus #2: Make “widow columns” full width

Let’s say that your original desktop row has three columns. If you apply the two columns on phone class dm-2-col-mob to this row, it will display two 50% wide columns side by side and the third column below which will also be 50% wide (see the example image below).

Often this is fine but in some cases, you might want to stretch the last “widow column” to cover the full width of the row. Here’s how to do just that:

1. Click the cogwheel to open the row settings
2. Click the cogwheel to open the column settings for the column that you want to stretch
3. Go to Advanced » Custom CSS
4. Add the CSS below in the Main Element field:

   grid-column: 1 / -1;

All done! Save and preview in frontend. Make sure that you add the CSS snippet to the column settings of the column that you want to stretch – not to the row settings.

Frequently Asked Questions About CSS Grid

Are you new to CSS grid? Don’t worry, here’s a quick introduction the popular design system that every savvy web designer should know. You’ll also find some links to resources where you can sharpen your CSS skills.

That’s all for today!

I hope that you enjoyed this post. Subscribe to VictorDuse.com on YouTube and join our Facebook group for more crisp content on WordPress and web design.

👉 Related post: How To Adjust Divi’s Column Stacking Order on Mobile Devices (Elegant Themes)

👉 Related post: How to Change the Number of Columns in the Divi Blog Module (Elegant Themes)

👉 Related content: Complete FREE Divi course from VictorDuse.com