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!

Join +3 054 subscribers!

The result: Our custom column layouts library

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

Mixed Column Widths (Mobile & Tablet)

  • 2 columns (1/3 + 2/3)

    If you don’t change anything, the Divi row will display only one column on mobile.

  • 2 columns (2/3 + 1/3)
  • 2 columns (1/4 + 3/4)
  • 2 columns (3/4 + 1/4)
  • 3 columns (2/4 + 1/4 + 1/4)
  • 3 columns (1/4 + 1/4 + 2/4)
  • 3 columns (1/4 + 2/4 + 1/4)
Display custom Divi row structures in mobile devices

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
Display Divi columns with equal width side by side in mobile devices

Do you miss a specific column structure in the list? Let me know in the comments below and I’ll see what I can do.

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.

There are 24 errors which must be fixed before you can save. Update anyway, even though it might break your site?

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:

W3C CSS Validator result

The World Wide Web Consortium (W3C) develops standards and guidelines to help everyone build a web based on the principles of accessibility, internationalization, privacy and security.

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:

False error code in Divi

“Resolved: This is caused by a deprecated code called CodeMirror, which is included as part of WordPress. It’s WordPress, not Divi, that has to replace CodeMirror. WordPress is already aware.”

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:

Just ignore the error message, says the Elegant Themes support agent

“It shows the error as WordPress doesn’t recognize it but it works fine on the front-end so you can ignore it.”

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 DiviMundo ***/
    
    /* Global CSS */
    @media screen and (max-width: 980px) {
      .dm-row {
        display: grid;
      }
      .dm-row.et_pb_row:after {
        content:none;
      }
      .et_divi_theme .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.
    Tick the checkbox to the left of the text "Update anyway, even though it might break your site?"
  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.

 

Mixed width columns

Phone CSS class

Tablet CSS class

Two (1⁄3 + 2⁄3)

dm-2-col-1-2-mob

dm-2-col-1-2-tab

Two (2⁄3 + 1⁄3)

dm-2-col-2-1-mob

dm-2-col-2-1-tab

Two (1⁄4 + 3⁄4)

dm-2-col-1-3-mob

dm-2-col-1-3-tab

Two (3⁄4 + 1⁄4)

dm-2-col-3-1-mob

dm-2-col-3-1-tab

Three (1⁄4 + 1⁄4 + 2⁄4)

dm-3-col-1-1-2-mob

dm-3-col-1-1-2-tab

Three (2⁄4 + 1⁄4 + 1⁄4)

dm-3-col-2-1-1-mob

dm-3-col-2-1-1-tab

Three (1⁄4 + 2⁄4 + 1⁄4)

dm-3-col-1-2-1-mob

dm-3-col-1-2-1-tab

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

Equal width columns

Phone CSS class

Tablet CSS class

Two

dm-2-col-mob

dm-2-col-tab

Three

dm-3-col-mob

dm-3-col-tab

Four

dm-4-col-mob

dm-4-col-tab

Five

dm-5-col-mob

dm-5-col-tab

Six

dm-6-col-mob

dm-6-col-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

Please notice: In some backend previews, like in the Divi Theme Customizer preview, the column structure is not always displayed 100% accurate. Save and preview in frontend to see the final result. Clear your browser cache and website cache if the new row structure doesn’t display.

One example on how to use the CSS classes

Example of two mixed Divi columns side by side in phone and tablet

💡 Pro tip: Just change the values gap: 15px (for phones) and gap: 25px (for tablets) in the beginning of CSS code to adjust the spacing between the columns. The CSS grid gap value is similar to the “gutter width” option in the Divi Visual Builder settings for desktop rows.

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:

Before: Top-aligned columns

Two columns on mobile in Divi

After: Center-aligned columns

The columns are now vertically center-aligned

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.

Before: Small widow column

Two columns on mobile in Divi

After: Full width widow column

Making the last grid column full width

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.

O
P
What is CSS Grid, and how does it differ from Flexbox?

CSS Grid is a two-dimensional layout system in web development, while Flexbox is one-dimensional. Grid handles both rows and columns, while Flexbox manages content alignment along a single axis.

O
P
How does basic CSS grid code look like?

To begin using CSS Grid, define a container as a grid with display: grid;, set up rows and columns with properties like grid-template-rows and grid-template-columns, and position items using grid-row and grid-column.

O
P
Is CSS Grid suitable for responsive design?

Yes, CSS Grid is excellent for responsive layouts. You can use media queries to adapt grid structures, row/column sizes, and item placement to different screen sizes.

O
P
Is CSS Grid widely supported in web browsers?

CSS Grid is well-supported in modern browsers. Here's an overview of the web browser surpport for CSS grid.

O
P
Where can I learn more about CSS grid for Divi?

The blog post How to Create a CSS Grid Layout for Divi Modules from Elegant Themes is a god starting point. CSS-Tricks offers A Complete Guide to CSS Grid. Another great source of knowledge is the CSS guru Kevin Powell's Youtube playlist about CSS grid.

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo 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 post: Complete FREE Divi course from DiviMundo

Related posts

4 Comments

  1. Hi there,

    This article and the other article on change number of column (https://divimundo.com/en/blog/change-number-of-columns-on-mobile-in-divi/) is really useful. and robust. We can even set the gutter width to our liking on tablet and mobile. Thank you very much for the code.

    But, what about the desktop itself? Of course we can use Divi row column feature there and adjust number of column according to our liking. But the one thing that really bother me is the inability to customize the gutter width between column on desktop. we stuck with 1-4 custom gutter width predefined by Divi. Do you have robust solution for this like the one you did for tablet and mobile? Would love to see solution for customizable gutter width on desktop. Thank you !

    Reply
    • Hi Wan! That’s a really good idea. I’ll add it to my “to do” list. 🙂

      Reply
    • Thanks for sharing your thoughts. I wouldn’t say that the standard CSS Grid implementation is a “major issue” but sure, there are different solutions for different use cases.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo