Want to learn how to use CSS with Divi?
Our CSS & Divi Beginner Course is now open for enrollment!
CSS Grid Blog Free Divi Layout.
This clean and modern blog page layout uses CSS Grid and flex for variable column widths and to keep posts the same height across screensizes, no matter how much your content length varies.
It also makes use of the wonderful feature that is CSS Variables (custom properties), making it super easy to edit for your needs 
I have kept styling to a minimum so that it is easy to have it fit in with your site style, and I have also added the .et_pb_button class to the read more links with a little jQuery so they will take on the styles you have set for buttons in the Theme Customiser, without the need for additional CSS 
View the demo and download this free layout below.
Be sure to view the ‘Read Me’ file in the download package for full instructions.
If you found this helpful please leave a comment.
Michelle X
Beautiful layout, great work
Hi!
I am using Divi theme and in one of my section I am using the blog module with grid layout. The problem I am facing is that in a line it display’s three post whereas I want to display 4 to 5 post in a single line. It’s ok for the featured image to be small.
How can I do this ?
Edit the first section of CSS, you can have as many columns as you wish:
/*Blog layout settings, adjust these values only*/
:root {
--ds-white: #ffffff; /*The background colour for the post content and text colour for the second and third post content*/
--ds-grid-2-item: 250px; /*Minimum column width for second grid, decrease this value for more columns*/
--ds-grid-gap: 30px; /*The gap between posts*/
--ds-title-background: rgba(0, 0, 0, .5); /*The background colour of the titles on the second and third posts*/
}
Hi -After installing this I try to hide the date posted meta data and the via the blog selector – It immediately corrupts everything and seems to remove formatting.
Maybe I am doing something wrong?
I am going to need some more details and link to the issue to help
Hey Michelle,
thank you for this great Layout!
Sadly since the new Update of Divi, the Blogmodule has no Divbox around the content (Categories, HL, Excerpt and Button) Thats why the first case is totally messed up. =(
Do you have a hint how to fix this? =)
Kind Regards
Marius
Check your JS code, it will likely be corrupted. The div is created in the JS not by Divi.
Thank you, that worked totally fine. Actually i just put the code in another area and didn’t change anything in the code, and it worked.
Michelle – Thank for this great layout. I ran into the same issue as Marius after I upgraded to the newest Divi and WP 5.0. I examined the JS code block and everything looked fine, but I could see that the div containers for the content were not being created by the JS and that was messing the layout up. I was able to resolved the issue by creating a new fullwidth code block and copy/pasting the JS into the new block and then saving. Not sure why this worked, but it did. Thanks – Brandt
Thank you so much Michelle, I absolutely love this.
Super easy to install and looks fantastic.
This has been working perfectly – and looking great. Until today. Divi update – and now the page is broken: https://musictechfest.net/mtfpodcast – any thoughts on how we can fix this quickly please?
Looks ok to me?
That’s because I had someone from Divi Support go in and fix it. Apparently there is some kind of missing tag in the css which didn’t break it in the previous version of Divi. Prior to the fix, it was okay unless I changed something (an image on the page, some text – anything) and then it broke. So I would just revert to the last working version until I could get someone to find the problem. Now that’s been sorted by the Divi team, it’s not necessarily a problem for me any more, but it may cause problems for… Read more »
Hello, it works very well but I have a problem: I just want the last 2 rows with the posts minimized (image, title, data and more) but when I delete the upper rows in the constructor of divi the last 2 rows lose all the settings and excerp/content of the post appears again. Any help?
You need to edit the CSS as its currently applying the styling via the nth-child pseudo selector.
Hi I was wondering if anyone has problem viewing this customization on Internet Explorer? It works great on Chrome and Safari. Anyone could help?
It appears that the blog layout code doesnt work on IE.
We don’t support IE and neither does Microsoft.
I love this layout and it looks fantastic… just one thing. Somehow it’s making the text labels for comments at the bottom of blog posts not show up. Looking at the code, I can’t see how it’s doing it, but if I take the script out of the header, they show up. Any thoughts? You can see it on this post here: https://thorsby.com/new/disrupting-myself/
Thanks in advance!
This was my fault, I missed a class in the jQuery code. So in this section at the bottom: $(".et_pb_post").html(function () { return $(this).html().replace(/\|/g, '/').replace(/,/g, ''); }); Change to: $(".et_pb_post .post-meta").html(function () { return $(this).html().replace(/\|/g, '/').replace(/,/g, ''); });
Thank you SO much!!!! This is absolutely perfect for a blog I am designing!!! <3
This is a beautiful blog layout. Thanks
Hi, and thanks for this nice css grid. I would like to do the same layout for projects also. Is there a way to do this?
You can use the same method and change the element classes
Greetings Michelle – what feature photo size works best for this layout?
I always use 1080 x 675 for blog posts
I wasn’t able to installed. It says:
The package could not be installed. The theme is missing the style.css stylesheet.
Theme installation failed.
This is not a theme, it is a page layout. Please unzip the download package and view the Read Me file.
Hi I’m trying to get the first 3 blog post to all be the same. As a 3 column grid. I was able to grab the code you used to format 2 and 3 and apply it to 1. I am stuck. I can’t get 1 to be on the same row as 2 and 3. modified code: /*———————————————–*/ /*——-CSS Grid Blog Layout by Divi Soup——-*/ /*———————————————–*/ /*Blog layout settings, adjust these values only*/ :root { –ds-white: #ffffff; /*The background colour for the post content and text colour for the second and third post content*/ –ds-grid-2-item: 250px; /*Minimum column width… Read more »
Looks like you got this fixed Shawn?
The divi soup css grid blog is not responsive with height images for IOS.
The layout is responsive. I’m not sure what you mean exactly, but if share a link to an example we are happy to look. This guide may also be helpful: https://www.elegantthemes.com/blog/divi-resources/the-ultimate-guide-to-using-images-within-divi
can you help provide instructions on how to install?
Instructions are included in the download
This is great, I love CSS Grid! Thank you!
Many thanks Michelle, I love the minimal styling, enjoy your (school) summer holidays!
thanks! but how do i import the .json file into page like the readme says? sorry, I’m new to this
If you open a new page and select to use the Divi Builder, you’ll see an icon at the top of the builder that looks like two arrows (one pointing up, and one pointing down). Select that icon and you’ll see the import option…
Thank you so much, i really appreciate it!
Hi Michelle, I love this flavour!
This is a very nice layout, Michelle. Thanks for the free layout.
Gr8t! Thank you very much for all the effort you put into helping us
Wow, what a wonderful layout! Thank you very much!!!
Have a nice holiday
Where can I find the piece of code or setting responsible for “Read more”, I’d like to put it into Polish. Instead of “Read more” into “Czytaj”
You can use this in the functions.php file in your child theme:
add_filter(‘excerpt_more’, ‘mytheme_excerpt_more’);
function mytheme_excerpt_more($more) {
global $post;
return ‘ID); . ‘”>Czytaj‘;
}
This layout looks so great! Perfect for a recipe blog. Will definitely be trying it out. Thank you Michelle, for making & sharing
thans for the beautiful layout. when i tried in my website the layout is breaking. may i now the reason..
the screenshot is below at the page https://sugavasiprasadbabu.in/recent-events/
https://prnt.sc/k946du
It looks like your featured images may be too small and/or you don’t have all of the code copied correctly. Can you verify what size images you are using and what version of Divi you are using?
This is what I want to achieve with Divi just RIGHT NOW! Thanks for sharing this!
Beautiful Michelle, you are so talented
Great ! thank you very much…
Wonderful, clean blog layout! Thank you so much for sharing!
Hello, Michelle, a few days ago, in another tutorial (R42: How to Add Shape Dividers to Any Row, Column or Module) I asked about this; how to edit the “Blog Module”. In my opinion “Blog Module” is the most under-developed & neglected module in Divi; though it should not be. Thanks for this tutorial. I haven’t tried yet. If I get any question I will feel free to ask (you don’t even need to say me that ). One of my initial question was, how do change the metadata position; i.e. in here Date & Category is shown before Title.… Read more »
This is great stuff, Michelle, and one I will consider using in a project I’m drafting now. Thanks so much for sharing!
This is excellent, Michelle. Thank you!
you are super inspirational – thank you. ♥
Amazing, thank you so much! This is going to save me a ton of time.