How to use CSS Grid in Divi + Free Layout Set

Learn how to easily implement CSS Grid Layout within the Divi Builder with just a few lines of CSS!
You can copy the code I used from the blog: divilover.com/how-to-use-css-...
And feel free to download the free Grid Layout Set here: divilover.com/css-grid-based-...
Hopefully, it's useful. Let me know in the commnets what you think!
~ Best,
Ania

[@aniaromanskacom]

Here's where you can download the Free Grid Layout Set: divilover.com/css-grid-based-layout-set/

[@DinomiksCZAuntie]

Hi Ania, this is an amazing video thank you for. I would love to ask, is it possible to somehow add class into any of the module’s internal element? As I can see grid-area:image1 would work like that probably right? But how about if I got fullwidth section in it I got a module fullwidth header but in the module you got alrady buttons and it is not really like button module itself, so I would need to give the button one class to work with that particular button....is there any possibility to do it please? Thank zou so much for your time and for these helpful videos.

[@aniaromanskacom]

@@DinomiksCZAuntie you don't need a unique CSS class on an element to target it with CSS - you can use the parent container CSS class or ID and then target elements inside the container (using pseudo-selectors such as nth-child or others). www.w3schools.com/cssref/css_selectors.asp

[@FriedrichBoettger]

I can handle a grid okay for regular web pages, but I haven't dared to try it in Divi. Putting the code in the page settings makes this a pretty easy edit for some really beautiful results. Thank you for your excellent tutorial.

[@aniaromanskacom]

Happy to help! :-)

[@PatrickLipke]

Thanks a lot, fixed my problem with your tutorial in 15'

[@user-bc4zz8pe5r]

Thank you very much, we need more KZbinrs like you!

[@aniaromanskacom]

Thank you! ;-)

[@cheets8279]

I wish I had seen this about 2 years ago!!! Far easier to follow than the mission I went on to make a CSS grid DIVI homepage!!! Brilliant!

[@aniaromanskacom]

This is do good to hear, I'm happy I could help!

[@vlidk]

Thank you Ania. The way you explain everything is refreshing.

[@aniaromanskacom]

Thank you so much for your kind words! 😊💜

[@jurgenvalksvalkie7170]

Again I learned a LOT from your video. Thank you very much Ania!!

[@aniaromanskacom]

Glad it was helpful! 😄

[@JfDesigns]

I’ve wanted to learn the css grid technique inside of Divi. This was fantastic. Thank you.

[@aniaromanskacom]

I'm happy I could help 😄

[@kamyLue]

I was looking for this for 1 month and finally fount it. Thanks

[@aniaromanskacom]

I'm happy to hear it's helpful! :-)

[@RavindraSDhande]

Thank you, Ania, for this tutorial... I was looking to create this on one of my websites, tried it so many times... but was unable to define a similar grid... this tutorial will help me get it fixed... So easy and simple... You make it so easy...

[@aniaromanskacom]

😊I'm very happy to hear that it was helpful, Ravindra! Thank you for your comment :-)

[@17aig]

Thank you so much for this tutorial you're explaining it so clear can't wait for the next one

[@aniaromanskacom]

You are welcome, I am soo happy to hear it was helpful and easy to follow! 😊

Very useful, thank you Ania.

[@aniaromanskacom]

I'm very happy to hear that! Thank you 😊

[@scrat18]

Wow! So well explained... Thank you Ania!

[@aniaromanskacom]

You're welcome, Michiel! I'm glad I could help 😊

[@gaborujhelyi8365]

You helped me truly a lot! Ty very much

[@m.mashhoodansar4102]

Thank you so much for this tutorial . The way you explaining is fantastic.

[@aniaromanskacom]

I'm happy I could help!

[@alejandroflain9862]

lovely technique & teacher, thanks!

[@aniaromanskacom]

Thank you so much!

[@pw4677]

Thank you for this. Absolutely amazing!!

[@aniaromanskacom]

I'm glad you liked it!

[@gangaindoage]

amazing worked perfectly

[@aniaromanskacom]

Happy it worked! 😁

[@gangaindoage]

great tutorials Ania, thanks for sharing it

[@aniaromanskacom]

Thank you for watching 😊

Hi Ania! Congratulations on the video, the steps are very easy to follow and everything is easy to understand as you explain each step. I also subscribed to your channel!

[@aniaromanskacom]

You are so kind, thank you! I'm happy you found this tutorial helpful

[@XavierLarrea]

Great tutorial! As always!

[@aniaromanskacom]

Thank you so much 😄

[@michaelfarmhand]

Thanks, that was really helpful

[@aniaromanskacom]

Glad to hear it!

[@ultimatekv]

Wooooow impressive Ania. Will definitely be helpful :)

[@aniaromanskacom]

That is great to hear! Thank you 😊

[@ArjanDral]

Thanks for explaining this nice solution.

[@aniaromanskacom]

I'm glad I could help 😊

[@AsitAithal]

As usual, amazing!

[@aniaromanskacom]

Thank you, Asit!

[@tjveach]

Very well done Ms Ania!!

[@aniaromanskacom]

Thank you, sir! ;-)

[@tjveach]

@@aniaromanskacom love when you call me sir! Just kidding … !!

[@chrisbaylis4733]

That's fantastic. I just built a site in oxygen because it has grid and I didn't know how to do in divi. This is amazing and I think I will try it out.

[@aniaromanskacom]

I'm glad I could help!

[@mustafaalawad2667]

The CSS grid is really powerful, nice video, the only issue that I find is a divider, that will make it unclickable! I will try it with the image module✌️ thank you for inspiration ✌️

[@doeyehof]

Thanks you very much!!

[@aniaromanskacom]

Glad it helped

[@gurushakti69]

but the layout in the video shows a tab grid view but the tabs do not exist in the layout? Please help me assign it.

[@WillOfTheWeb]

Excellent tutorial! Wonder when this will be built into Divi?

[@nancymikyska2832]

Why do you use the Divider module to bring in the images? Couldn't you use the Image module?

[@moroco.design]

Awesome, Ania! It's like magic... Does it work with other page builders too? (e.g. Elementor)

[@aniaromanskacom]

Ahh yes, the magic of CSS! 😊 It should work the same in other page bilders, you just need to make sure to keep similar HTML structure (the parent container uses display:grid; and all children are grid items with corresponding area names).

[@moroco.design]

@@aniaromanskacom Thanks for your reply. I'll try it when I get the time to do it

[@willnuttall2359]

This is genius Ania, thank-you. I've been fighting with Divi's speciality sections for far too long! Do you know of a way to replace the static background-image panels with a basic image slider instead please?

[@aniaromanskacom]

Hi Will, thank you, I'm glad it's helpful. For simple image sliders you can try using the Gallery module.

[@willnuttall2359]

@@aniaromanskacom thanks for your reply Ania, can confirm that the Gallery module works a treat.

[@lemonroti1]

Hi , how about if i want the grid layout at desktop just same in mobile or tablet , is that possible? Tq

[@gerarddesilva5193]

Hi Ania. Just came across your channel. Some good stuff here. So we'll explained too. Thanks for sharing. I have a couple of questions. 1. By using css grid and a single row, does it make the website faster cf to using multiple divi columns? 2. If the divi theme is updated, will the css dissappear? Many thanks.

[@aniaromanskacom]

Hi Gerard, thank you, I'm glad you find the content helpful. To answer your questions.. 1. No, I don't think adding grid will help you speed up your site. What we're doing is basically adding more CSS to change the default behaviour/alignement. 2. No, the CSS code added in the child theme stylesheet or Theme Options custom CSS field will not be deleted when updating the Divi theme. Hopefully, this helps ;-)

[@eamonmchugh2995]

for some reason, Divi wont let me type in "1fr" into the page settings

[@aniaromanskacom]

Hi Eamon, the syntax error checker in Divi is not perfect, it doesn't recognize all CSS features correctly, but you can be sure that the code is correct - the error message is false 🤓

[@eamonmchugh2995]

@@aniaromanskacom it keeps deleting the code I type in :(

[@aniaromanskacom]

@@eamonmchugh2995 that's odd. I'd suggest moving the CSS to the Theme Options or child theme stylesheet. Or using a Code module with tag if you don't want this to run globally and just on a single page.