How to Style Your Divi Blog Module Grid Cards (With 4 Examples)

Divi’s Blog Module has a useful grid layout option for your blog posts. The grid template organizes your blog posts into boxes or cards that make it easier to view more posts on your screen than a standard full-width blog layout.
The Blog Module Settings allow you to customize the overall design of your grid. You can easily make all of your cards the same background color, font, margins, etc…
However, the styling options are limited to the design of the grid as a whole, making it difficult to apply multiple or different designs to the cards within the grid.
Today I’m going to show you how to target and apply more than one style to the cards that make up your blog grid using custom CSS. I’ll show you how to apply a different style to every other card, creating a checkered effect. I’ll also show you how to style your cards differently by row and how to target and style any individual card by itself.
I’m including 4 examples of how to style your grid cards including a few hover effects you can use. By the end of this tutorial, you will be setup to create amazing blog grid designs for your next project.
Read more: www.elegantthemes.com/blog/di...

[@angeljai588]

OMG i was looking for this thing for weeks now - thank you very much broo

[@elegantthemes]

Great :)

[@imraan_alam]

What about category, achieve, search page ?????? We can't use divi builder for these standard pages.

[@veryfunny8918]

I am using Page Builder Everywhere and I am replacing archive pages with custom layout

[@GayleMareeH]

How did you get your blog posts horizontally aligned? Did you make sure the titles and the exerpt were exactly the same length? Actually now I look closer, they are the same. Mine are all over the place like a dogs breakfast.

[@LoveGuruBlaire]

Can someone help me? I added the divi blog grid layout and for some WEIRD reason all the posts don't line up perfectly. I"d also like to add the page 1, 2, 3, etc on the bottom of the blog so people can view more posts as the sidebar DOES NOT work (no matter what I tried to trouble shoot)

[@JanineMKartist]

how come divi no longer has the option to add post types to the blog module in order to have sliders or video instead of a standard feature image?

[@e-sabservices328]

Hello Elegant Themes,
I managed to run this tutorial on my blog successfully. Thank you. But I would like that whatever the contents of the articles and that it is with or without images, it would be necessary that the size of all the grids will be the same. Because some grids are bigger of others and that makes the blog page design less harmonious. But I don't find what to add to the css code and where in the css code to achieve that. I would be very grateful if you would like to give me this invaluable help.

[@21willyx21]

I need to add some Advanced Custom Fields to the list of posts, please help.

[@kishorgavit4363]

I just wanted to list my recent post without excerpts on home page can you make a video how to do it step by step

[@mateuszpilarczyk1074]

Hi,
I can't choice layot as grid. No have this option what to do?

[@duocanada7793]

how to get the links in order to find the CSS codes?

[@nicoleoconnor5363]

It's on MAK's blog. His notes at the top of this page take you to that post. Scroll down within his post to see them.
www.elegantthemes.com/blog/divi-resources/how-to-style-your-divi-blog-module-grid-cards-with-4-examples

[@iasterme]

where is the show notes section?....where can I find the CSS Code?

[@BillyLoweBeauty]

Will this work for blogger?

[@LuisAlbertoGuzmanGarcia]

nope

[@rabinpoudyal8184]

Please reply this comment: How can i put advertisement banner in my header for a news portal website. Please reply .. I need to develop news portal site and i need header layout that can put ad banners so please tell me how is this possible

[@arthurb9454]

this is out-fucking-dated !