Create Custom Divi Row Column Structures For Mobile 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) using responsive CSS grid.
👉 Copy the CSS snippets from the blog post: divimundo.com/en/blog/create-...
Chapters
00:00 - Intro: Row layouts in Divi
01:27 - Why you will see a false error message in the Theme Customizer when using CSS Grid with Divi
04:10 - Enable CSS Grid in Divi by adding custom CSS
05:27 - Create custom row column structures for mobile in Divi using CSS Grid
10:37 - Fixing "widow columns" using CSS Grid (force the last column to be fullwidth)
12:12 - Center-align columns vertically using CSS Grid
13:25 - Live demo: Different row structures in phone and tablet with Divi using CSS Grid
14:58 - Understanding basic CSS Grid in Divi - explaining the code
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 popular WordPress theme from @elegantthemes
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)
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)
Equal Column Widths (Mobile & Tablet)
1 column on tablet
2 columns on tablet
3 columns on tablet
4 columns on tablet
5 columns on tablet
6 columns on tablet
Any questions? Let me know in the comments!
⚡ DiviMundo.com is dedicated to spread knowledge about WordPress and the Divi theme. The vision is that everyone should be able to design beautiful websites without exhausting coding issues. Read more at divimundo.com/en/
⚡Get 10% off Divi here: divimundo.com/divi10/ (affiliate link)
#divi #mobile #responsive

[@holliebarac1701]

Victor, what would we do without you!? You are absolutely brilliant. Thank you, thank you, thank you!

[@DiviMundo]

Wow, that’s really nice to hear! ☺️

[@DiviMundo]

👉 Here's the blog post with all the snippets: divimundo.com/en/blog/create-custom-divi-column-structures-in-mobile-devices-with-css-grid/

[@lionsky]

Victor! Excellent Video explaining and Free code for use. You are a blessing! Solved my issue that Divi Support had to give up on after an hour of back and forth. Just upped my web designer game so much. Thank you!

[@DiviMundo]

Cool, I'm really glad to hear that! Maybe I should send this video to the Divi support. 😀

[@user-cipheredhistories]

Your video was excellent. Thank you for taking the time to create such an look to phones. When it comes to the layouts. Seeing how 70%plus of traffic is now done thru phones. Being able to create something that stands out above another's page on the phone is a game changer. Thanks again. For creatine this CSS I will put it to good use.

[@DiviMundo]

Thanks a lot for your kind words Brian! I'm sure more layout options for mobile devices will be the top priority for the Divi team after the launch of Divi 5, but to be realistic, flexbox and grid will probably take at leat a year from now to implement in the visual builder.

[@jamesdavis8731]

You are one helluva great resource for knowledge. Excellent. I really appreciate you spreading your knowledge.

[@DiviMundo]

Thanks James, I'm really glad to hear that! 😀

[@savindudananjaya2633]

that's grate and worthful 😍

[@DiviMundo]

I’m glad you liked it! 😊

[@shivam_pandya.]

This is great, I was looking for something like this from very long time, I'm not webdesigner but I needed something simple for my portfolio so thank you, by the way how do I change width of column on desktop, I mean when I select format of 3 columns then they have pre-fixed sizes. I can reduce the width of content and column but spacing remain same. Other columns does not adjust according to new space.

[@shivam_pandya.]

currently I have applied different margins, paddings and width size to adjust and fit everything.

[@DiviMundo]

I'm glad to hear that! Sure, you can change the spacing between columns on desktop by editing the Row settings under Design » Sizing » Use Custom Gutter Width Here you have four pre-defined colum gaps. If you want more granular control., you can change the media queries in my CSS and apply it to deskop (min-width: 980 px).

[@shivam_pandya.]

@@DiviMundo i see thanks, also how do i create something like e columns out of 100% ratio of raw...20% - 30% - 50%

[@DiviMundo]

@@shivam_pandya. You can set the row width and max-width to 100% and gutter width: 1. You an replace the fr values in the CSS grid code with percentage, for example: grid-template-columns: 20% 30% 50%; Just remove the gap value (or set it to 0) if you don't want to have spacing between the columns.

[@shivam_pandya.]

@@DiviMundo understood and thank you very much ✌️