How to change the Divi Blog Module Grid with CSS

It this Divi Theme Builder tutorial, I'll show you how to use CSS Grid to adjust number of posts in a row inside the Divi Blog module. If you haven't played with CSS layout system before - this simple tutorial is a great way to start!
Copy the CSS and download the free Theme Builder layout pack with archives/categories template and single post template from Divi Lover website: divilover.com/...
Here's the Blog layout demo page: demo2.divilove...
And single post template: demo2.divilove...
I hope it's useful! Please let me know in the comments! :-)
~ Ania

[@bluerate1000]

Many thanks Ania for this instructive tutorial that shows how exciting working with CSS applications can be. Especially the use of the fractions is very exciting and helpful.

[@aniaromanskacom]

I'm glad you found it helpful. The fr unit is awesome, we do not need to count 10% and px, it works like magic ;-)

[@terrybattersby8903]

Thank you Ania. I was using the Grid view in my search module and I was getting blank search results on first search. My search worked fine in the full view mode but the display was too big. Your solution solved the problem with 4 columns in Full search. Now I only have to find the CSS to enhance the text of my project articles. 5 Star

[@aniaromanskacom]

I'm glad it was helpful, Terry! And I think Divi fixed the blank grid issue with the latest update just a few days ago..

[@luisangelmasfil5084]

I just recently found your channel and I was amazed at how you use css in divi. I don't speak English so I watch them with subtitles in Spanish, hopefully one day you'll share material in Spanish. Thanks for sharing the tutorials...

[@aniaromanskacom]

Thank you, and I'm happy it was helpful even with the language barrier!

[@ceciliaclaros7960]

Your explanation saved me. Thanks for the css explanation, I didn't know all the things that can be done with grid.

[@aniaromanskacom]

Awesome, so happy I could help!

[@MrLocokrang]

Thanks for taking the time to figure this out, you save a lot of time and money for us!

[@aniaromanskacom]

Glad to help! :-)

[@abrahammark8286]

Very helpful Ania, just what I have been looking for 👏🏻👏🏻👏🏻

[@aniaromanskacom]

That's great to hear, thank you :)

[@chiefkibitzer9419]

Tried a few other methods first but this one actually did it cleanly. And I really appreciate you giving the mobile code too, thanks

[@aniaromanskacom]

You are very welcome, Chief. I'm glad it came in handy :)

[@cuccaroc]

Awesome! It is very userful. Thank you Ania.

[@aniaromanskacom]

Happy to hear that!

[@AlexWent]

Fantastic as always. Thanks for your no-nonsense approach and clear explanations.

[@aniaromanskacom]

Awesome, thank you for your kind feedback!

[@javierromero8088]

Fantastic Ania! I watched several tutorials about this topic and by far yours is the clearest and makes the more sense. Thanks so much!!

[@aniaromanskacom]

Thank you Javier I really appreciate your comment :) Thank you for watching!

[@LEGGEND]

Thank you very, very, very much for this tutorial! You helped me to fix a real problem, I can't understand why Divi runs the blog grid like this. Those misaligned boxes are really ugly to look at.

[@aniaromanskacom]

Glad I could help! :-)

[@a.h.1936]

Thank you Ania. I really hope you are planning to make a series of these handy tips. They are great.

[@aniaromanskacom]

Thank you, I'm glad you like it, I hope to release a new tutorial every week ;)

[@StewartSavage]

Thank you, Ania. Great training video. Will definitely use the grid to style blog modules in the future.

[@aniaromanskacom]

Thank you! Happy to help 😊

[@profestanca1662]

Thank´s Ania. Stay safe !!! Stay in !!

[@aniaromanskacom]

Thank you, best wishes :)

[@geofflockwood1316]

Thanks Ania, very helpful tutorial. I am now experimenting with applying the same code to the gallery module.

[@aniaromanskacom]

That's awesome Geoff! I think I'll do that too ;-)

[@nicholasmlynn]

Very helpful, thorough, and instructive. Thanks!

[@aniaromanskacom]

Glad you enjoyed it!

[@moroco.design]

Awesome, Ania!! Thanks a lot! Will download the templates for sure!

[@aniaromanskacom]

I'm happy I could help!

[@francineperret-gentil717]

Excellent Ania ! very clear and useful, thank you !

[@aniaromanskacom]

Thank you, Francine! I'm happy to hear that :-)

[@geoffcooke7176]

Awesome ! I like your instruction style and very informative css coding insight. I am enjoying your products which we recently purchased 😊

[@aniaromanskacom]

I am very happy to hear that! Thank you 😊

[@christianharnisch5245]

Very helpful and just in the right moment. Maybe you can do more examples of the actual possibilities of changing and customizing the DIVI Blog module?! ;)

[@aniaromanskacom]

I'm happy to hear it's helpful. I might show a step-by-step on how I styled the Free Layout I mentioned, stay tuned ;-)

[@arthurbex4323]

Thank you so much, i had problems with wp rocket and optimizing css and this fixes that!

[@aniaromanskacom]

Glad it helped!

[@ni-wo]

Finally I understand it! :D This helps a lot! Thank you very much.

[@aniaromanskacom]

That's awesome, Nikolaj. I'm so happy to hear that! :-)

[@WillOfTheWeb]

This was a great tutorial, thanks very much! :) Classes and ID's always get me.

[@aniaromanskacom]

I'm glad you like it, and I think that being able to figure out what selector to use is the most important skill when it comes to writing CSS. 👍

[@CristianConti]

Great video, thanks for all css code versions, i learned something new today!!

[@aniaromanskacom]

That's great to hear! Thank you :-)

[@fraidoonhu9284]

Wow that was very easy and useful. Thanks a lot

[@aniaromanskacom]

It's great to hear, thank you 🙂

[@MrAtifAftab]

Another amazing tutorial👍 Always look forward to your videos🙂👌

[@aniaromanskacom]

Thank you, Atif! I appreciate it! :)

[@Mark16NZ]

Very informative. Thanks!

[@aniaromanskacom]

I'm happy to hear that, thank you 😊

[@RavindraSDhande]

Thank you do much for this wonderful css tut, it really was a very informative video. You are an expert.... would love to learn CSS from you... do u have any course designed by you...

[@aniaromanskacom]

Thank you, I'm working on it ;)

[@RandyHunt]

Thank you Ania for a great tutorial!!!

[@aniaromanskacom]

Glad it was helpful! :-)

[@maksymdavydchuk]

Thank you Ania, it was very helpful!

[@aniaromanskacom]

I'm very gal to hear that! :)

[@nikolinamihaljevic8640]

Very, very useful. Thank you Ania

[@aniaromanskacom]

Thank you, Nikolina, I'm very happy to hear that :-)

[@mervinhatten5513]

Thank you so much Ania, you are a very intelligent, helpful and beautiful woman x

[@aniaromanskacom]

Thank you :)

[@JfDesigns]

A wonderful walkthrough!

[@aniaromanskacom]

Thank you!

[@rosapistolesi3556]

very useful and simple, thanks!

[@pw4677]

That was very helpful. Thanks Ania!!

[@aniaromanskacom]

You're welcome Pam, I'm glad to hear that :-)

[@online_hustlings]

great lecture, love your presentation style. thank you. how do I make the title and other meta elements appear beside each featured image?

[@ahab_579]

Thank you very much! Great tutorial!

[@aniaromanskacom]

Thank you, Ahab! I'm glad you like it :-)

[@DanielGarcia-ei3it]

hi, I need help ! How do I modify the number of columns in the blog module grid option in divi, can you help me? I want 6 grids to come out instead of 3

[@ariellajarca8434]

Thank you! this is waht I am looking for

[@aniaromanskacom]

Glad I could help!

[@taranelson3827]

I just love you! Thank you for teaching me sooooooo much! (:

[@aniaromanskacom]

You are so welcome!

[@elit6366]

Thank you so much!!

[@Oleksandrafenenko]

thank you so much. It is very helpful.

[@aniaromanskacom]

You are welcome! I'm very happy to hear that :-)

[@louisdupisani2734]

Great video Ania!

[@aniaromanskacom]

Thank you :)

[@prta]

Thats amazing. You got a new subscriber and a new fan :)

[@aniaromanskacom]

I'm very happy to hear that! Thank you, Paulo :-)

[@PaulTumialan]

Superb! thank you Ania!

[@aniaromanskacom]

I'm glad you liked it 😊

[@jacobreinholdt2]

Thank you - great tutorial

[@aniaromanskacom]

Glad it was helpful!

[@alainpatry]

Thanks Ania! It would be nice if the ET team would fix the false error messages when we input CSS in the panel - I always find it alarming and feel like I didnt do something right!

[@aniaromanskacom]

Yeah, it can be a bit a annoying, that is one of the reasons I prefer to use a child theme stylesheet.

[@ChristianMauerer]

Super helpful & Stunning Video Opener :)

[@aniaromanskacom]

Thank you Christian! I'm glad you like it :)

[@ricardovilardelgado]

Thank you Ania!

[@aniaromanskacom]

You're welcome Ricardo 😊

[@Slaneous]

Awesome, isn't CSS great!? Thank you Ania.

[@aniaromanskacom]

Oh yes, CSS is just awesome ❤️

[@mdeijaz7254]

Thank you that is very interesting

[@aniaromanskacom]

Glad you enjoyed it :-)

[@mtchnelson]

Ania, thank you for this video. I have a global footer on the theme builder template I am working on. When I use the ".et_pb_ajax_pagination_container>div{grid-column: span 3;}" code, it moved to the correct position. but behind my footer, so I can't see it. Any ideas on how to fix?

[@aniaromanskacom]

Hi Mitch, I'm not sure, would need to see the URL.

[@dasboot1820]

Thank you - FML I wasted so much time on this shit trying to get 4 column!

[@aniaromanskacom]

I'm glad I could help!

[@GaryJones2012]

@@aniaromanskacom Me too! My previous Newspaper theme had a number of grid layouts but divi does not. I've struggled with how to get four columns and failed. Although this is complicated I think I'm now in love with Ania.

[@alexandrer.170]

Hi, amazing tutorial. Thank you. Only one question. Your images are same size ? or does the css adjust them directly ? Because mine don't have the same size.

[@aniaromanskacom]

I'm afraid you'd need some additional CSS to make each image the same size. By default, Blog module uses the Divi blog image size thumbnail (1080 x 675).

[@astwooddesign5969]

Loving your tutorials, Thank you :) Is there a way to stop the span of the selected post appearing on the 'older entries' or basically the view that isn't the newest page? I'm basically using the span post for the first one as a feature.

[@aniaromanskacom]

No, sorry, I don't think that it is possible with just CSS. You can try using two separate Blog modules: the first one with just a single post and a second one with the Offset property set to 1.

[@philramsay8222]

Very interesting, I'm still trying to fix a problem though if anyone can assist? On the blog page(that lists the posts, not shows full individual posts) I need to style the grid that the posts show featured image to the left and the post title to the right of it with a post excerpt. So the featured image half is the same height as the post and excerpt half. Any help really appreciated!

[@aniaromanskacom]

Maybe this will help? divilover.com/how-to-customize-divi-blog-archives-and-category-pages/

[@andso3]

Thanks a lot, genius. 👏🏻 A quick question: is there a way to keep the "masonry" grid? Bests!

[@aniaromanskacom]

Thank you, I'm glad you like it. The masonry grid is possible, but only if you set the exact height on the container - check out this article for the detailed explanation: medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb

[@mateuszpilarczyk1074]

A jeśli u mnie nie wyświetlają się kafelki (gridy), zamiast tego wyświetla się cały wpis jeden pod drugim. Wiesz może jak to fix it ?

[@aniaromanskacom]

Niestety trudno stwierdzić bez url strony ;)

[@mateuszpilarczyk1074]

@@aniaromanskacom Już naprawione. W Polskim tłumaczeniu Layout to Układ Strony a nazwę Grid zamieniono na SIATKA :))).

[@ronaldteuthof6040]

Hi Ania, amazing tutorial! Thank you - just a question. How can I only show posts between certain dates in the divi blog module? Can I do that via css? How do I do that. For your information. I have a history site and want to show all post in a certain period in history. I don't want to use categories for that. Can you help me?

[@aniaromanskacom]

Hi Ronald, I'm afraid there is no such option in the Divi Blog Module, sorry.

[@RiccardoFumagalli]

Hi Ania, thanks for this video, very helpful! I'm having some trouble applying the grid CSS to only one of the two blog modules I have on one page. It looks I'm forced to use the CSS areas in Divi, none of which specifically applies to the class et_pb_ajax_pagination_container. Is there a workaround? Thanks!

[@aniaromanskacom]

Happy to help :-) That is why we are using the CSS class on the Blog module, to only target the et_pb_ajax_pagination_container for that one module.

[@RiccardoFumagalli]

@@aniaromanskacom thanks!

[@karilehkonen3380]

Hi Ania! Thank you for this! One question. If I want only the first article to be wider (not every fift), how should I do that?

[@aniaromanskacom]

Hi Kari, you can simply replace the :nth-child(5) with :nth-child(1) or :first-child

[@karilehkonen3380]

@@aniaromanskacom Thank you Ania!

[@khalphahassan3426]

Hi there Ania thanks for the beautiful content, i tried to use the css on divi 4.17 as i wrote the code on the main element css and the blogs content aligned vertical and not horizontal, tried some codes nothin clicked, any clues on this?? Thanks

[@aniaromanskacom]

I'm afraid you cannot add this CSS to the main element in the Blog module settings Advanced tab. It won't work this way. I suggest downloading our sample layout and then customizing it, if you have trouble recreating the same effect step by step.

[@khalphahassan3426]

@@aniaromanskacom the fun part is tht it worked when i wrote the code to divi theme Option custom css panel while it didn’t when i wrote the code to the blog module main element unless i erased “et_pb_ajax_pagnation container” but the problem is tht when it worked in the theme option panel it affected every blog module in every page(entire site made it look horrible🤣) while i wanted it in jus a single page..

[@aniaromanskacom]

@@khalphahassan3426 you can use a Code module or place the CSS to the Page Settings Custom CSS on that single page.

[@petrasalisbury4279]

Hi Ania, thank you so much for this helpful video. I tried using your code but unfortunately it didn’t work for me and it seems to be because the Divi class you are using does not exist in my HTML. Sorry I am very new to this but could it be because I am using Divi theme builder to create custom body template for my category pages? If this is the problem, could you please let me know what the code should be? Thanks so much? :-)

[@aniaromanskacom]

I am using the Theme Builder in this tutorial as well. The CSS should work, please make sure that you've set your blog Layout Style to "Fullwidth" in the Module design settings.

[@petrasalisbury4279]

Ania Romańska thank you for your reply. Actually I noticed that the divi class exists in the HTML when I visit the website but not when I am inside the divi theme builder which explains why I could not find it. :-) the reason it didn’t work was that I was putting the code in the wrong field. Works now. :-) thank you

[@michaelkavanagh5947]

Turns out same thing works on the portfolio module (not the AJAX filterable module the non Ajax one). Need to adjust as it uses only div's (> div to div:last-child). Go raibh maith agat, tá tú stór.

[@patrickwambu3679]

Hi Ania. Great tutorial. Can you one do one to style the divi gallery ?

[@aniaromanskacom]

Thank you, and sure, I'll add this to my to-do list :)

[@patrickwambu3679]

@@aniaromanskacom waiting. Thanks

[@alexandrer.170]

Hi Ania, thanks for your help in a previous comment concerning this video. Do you thing it would be possible to get this type of layout (horizontal card - materializecss.com/cards.html) for mobile layout only ?

[@aniaromanskacom]

You could achieve something similar with a Blurb module. There is an option to use the image on the Left. Otherwise - custom CSS would be the best way to go.

[@alexandrer.170]

@@aniaromanskacom Thank you. I will give a look for the module first. If there is any chance to have a css tutorial about it that would be very very kind from you ;) To be honest i tried but i get stuck with the title and author and date that are place vertically next to each other.

[@nisarqureshi2342]

who is watching

[@mirresnelting]

:)

[@aniaromanskacom]

Thanks for being here :)

[@tahawultv8574]

hello i am new in your channel and subscribe to this channel i need a little help can i ask you email id so i can asked you about this lecture i am waiting best of luck

[@JM7Blocks]

Thank you so much!

[@aniaromanskacom]

Happy to help 😀