Would you like to display your DIVI Blog page as a multi-column grid?
Divi's Blog module can display blog posts in a full-width or grid layout. If you choose the grid layout, the maximum number of columns you can have is three.
In this tutorial, with just a few CSS snippets, your blog will turn into a beautiful multi-column grid layout. Plus, the columns will be smooth and responsive across all browser sizes, so you don't have to worry about updating those media queries or responsive settings.
You can also consult our article to know How to create a blog page with the DIVI Blog module.
Preview
Before jumping into this tutorial, let's first take a look at the result we want to achieve.
Download DIVI now!!!
Configuring a Blog module with a full-screen layout
DIVI's Blog module can be used to add a blog anywhere on your Website. It really makes it easy to create a blog page in Divi. All you have to do is add a Blog module to the page using the Divi Builder.
For this tutorial, we are going to use a pre-made blog layout from one of free layout packs of DIVI which already contains a Blog module with a basic style.
To load the pre-made blog layout:
- Create a new page from the WordPress dashboard
- Give it a relevant name and click on 'Use Divi Builder'
- Click on “Choose layout”
- Type in the search bar 'Fashion Designer' and choose the layout 'Fashion Designer Blog Page'
- Make sure to choose Blog Layout and then click on “Choose Layout”
Once the layout loads, find the Blog module used to display blog posts and open the settings.
Set number of posts
In the blog settings, update the contents to limit the number of posts to 10. (This is mainly for aesthetic reasons, as our grid will eventually include two rows of five blog posts.)
- Number of positions: 10
Select Fullscreen layout
Since we're going to be laying out our blog in columns using CSS Grid, we need to make sure that the layout of the Blog module is 'Full screen' (not 'Grid'). This will ensure that blog posts are stacked vertically in their normal page order.
To change the layout of the Blog module, open the module settings and under the Style tab open the drop-down menu Template and select Full Screen .
Now each blog post will span the full width of the column (or parent container).
Let's add a border to blog posts. Update the border options as follows:
- Border width: 1px
- Border color: rgba (150,104,70,0.35)
Adding a custom CSS class to the Blog module
In order to effectively target this particular Blog module (not another) with our CSS, we need to give our module a custom CSS class. Under the advanced tab, add the following CSS class:
- CSS class: et-blog-css-grid
Creating the multi-column layout with CSS Grid
Now that our Blog module is set up with a fullscreen layout, we're ready to add our custom CSS.
We are going to insert a Code module under the Blog module to add CSS to the page.
In the code input box, add the necessary style tags to wrap any CSS code added to a page.
Inside the style tags, paste the following CSS code snippet:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
The first line of CSS presents the contents (or modules) in grid form.
display: grid;The second line of CSS defines the grid column model.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));The third row determines the spacing between grid items.
gap : 20px ;At this point, the five-column responsive grid is ready to go. In fact, if you don't want to use pagination or borders for your blog posts, you can stop here.
Here is the result so far.
Customize grid items
Then we can add a few lines of CSS that target the grid elements so that they are aligned to the top of each row and have some padding.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Removed grid pagination
Currently, if you have pagination active on the blog module, it will be treated as the last grid element in the CSS grid. To completely remove the pagination from the grid, we can give it an absolute position and place it directly below the blog module. To do this, add the following CSS:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Let's see the result so far!
Tip: adjust the size of all featured images (or thumbnails)
At this point, you may notice the inconsistency in the height of the images featured on each blog post. If you want them all to be the same height, you can also use additional CSS to do that.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
With a top internal margin of 56,25%, we should get an aspect ratio of 16:9 for all our images.
Feel free to adjust the padding on the image container to get the aspect ratio you want for your image.
Final result
And here is a final preview of our Blog module with our new columns and grid. And as we can see, the grid is fully responsive.
Download DIVI now!!!
Conclusion
It is done ! We have shown you in this tutorial how to arrange your blog posts in columns.
We were able to restructure the entire Divi Blog module into a fluid five-column layout. Hope this saves you time and gives you more options to create beautiful blog pages. You can also consult How to create a Blog page with Divi's Blog module
See also our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
