Are you frustrated by the default limitation of only three columns on the grid layout of the Divi Blog module? This can be a hindrance to creating a blog design that meets your specific needs. However, fear not, as Divi provides the flexibility to customize the blog module using CSS Grid.
In this tutorial, we’ll guide you through the process of adjusting the number of columns to your desired amount. Additionally, we’ll demonstrate how to create a responsive layout that automatically adjusts the number of columns based on the user’s screen size. So, let’s dive in and unlock the full potential of the Divi Blog module!
Set the Number of Columns in the Divi Blog Module
Step 1: Add a Custom CSS Class
In order to target a particular Blog module (not all Blog modules on your website), you need to give it a custom CSS class. Start by opening up the Divi Builder visual editor to add the Blog module then open up its setting. Leave the Blog module layout as the default layout, which is the Fullwidth layout, then head over to the Advanced tab, then open up the CSS ID & CLasses to add the following custom CSS class.
- wpp-blog-grid
Step 2: Add the Custom CSS Snippets
The next step is to add the custom CSS snippets to create a multi-column layout with the CSS grid. For this tutorial, we will use a code module to place the CSS snippets. But if you prefer not to, you can always move the CSS to the theme options or your child theme later.
Let’s add a code module under the Blog module then add the <style>
tag inside the Code editor to wrap the custom CSS snippets we will add later.
Now, you can choose how you want to create a Blog module with multiple columns.
- You can set a fixed number of columns you desire and reduce the column number for smaller media resolutions by repeating the CSS snippets and lowering the column number.
- Automatically fill up the grid container with the blog column and reduce it if the viewport is squeezed below the column min-width.
CSS Snippets to Add Column Manually
For creating multiple columns Blog module with the desired amount, paste the following snippet inside the style tags:
.wpp-blog-grid > div { display: grid; grid-gap: 20px; grid-template-columns: repeat(4, 1fr); }
What the CSS snippet above does is target the direct child of the Blog module which is the blog container and make it a grid with 4 columns with 1fr width and 20px gap for each column.
Now if you want to have five columns for instance, you can change the number “4” in the repeat function to “5” and so on.
If you’re using pagination, you need to add the following CSS snippet so it won’t be treated as the last item in the CSS grid.
.wpp-blog-grid > div >div { width: 100%; position: absolute; bottom: 0; transform: translate(0%, 150%); }
By now your Blog module will have 4 columns layout like follow.
Now all you need to do is make the module have different column amounts on different devices. To do it, add the following CSS snippets and replace the number with a smaller number from in the repeat
function as you’ve done before but with a smaller number and repeat it for each @media
resolution.
.wpp-blog-grid > div { display: grid; grid-gap: 20px; grid-template-columns: repeat(4, 1fr); } .wpp-blog-grid > div >div { width: 100%; position: absolute; bottom: 0; transform: translate(0%, 150%); } @media (max-width:980px) { .wpp-blog-grid > div { grid-template-columns: repeat(3, 1fr); } .wpp-blog-grid > div >div { width: 100%; position: absolute; bottom: 0; transform: translate(0%, 150%); } } @media (max-width:600px) { .wpp-blog-grid > div { grid-template-columns: repeat(2, 1fr); } .wpp-blog-grid > div >div { width: 100%; position: absolute; bottom: 0; transform: translate(0%, 150%); } } @media (max-width:460px) { .wpp-blog-grid > div { grid-template-columns: repeat(1, 1fr); } .wpp-blog-grid > div >div { width: 100%; position: absolute; bottom: 0; transform: translate(0%, 150%); } }
Once you’ve placed the snippets on the code editor, save your changes and see the result of your customizations.
CSS Snippets to Auto-fill the Grid with Blog Columns
With the following CSS snippets, you can create a Blog module that adjusts its layout dynamically based on the available space. By setting a minimum width of 200px for each column and a maximum width of 1fr, the grid container will automatically fill up with as many columns as possible, while ensuring that each column is at least 200px wide. If the device screen size decreases, the number of columns will be reduced, allowing the Blog module to adapt seamlessly to different screen sizes. For example, at a maximum container width of 1080px, the grid will have 5 columns, each with a width of 200px, resulting in a total width of 1000px.
.wpp-blog-grid > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
Paste the CSS snippet above in the code editor inside the <style>
tag and your Blog module will turn into a grid layout with a responsive column design.
And if you use pagination, you need to add the following CSS snippet so it won’t be treated as the last column in the CSS grid.
.wpp-blog-grid > div >div { width: 100%; position: absolute; bottom: 0; transform: translate(0%, 150%); }
Here is the screenshot of how the snippets look on the code editor.
That’s it! you can continue to style the module however you want, but don’t forget to save it and see the result of your customization.
Adjust The Featured Image Height
You may have noticed that the featured images on the blog post cards have varying heights, which can create an inconsistent look. To address this issue, you can place the following CSS snippets on the code module to ensure that all the images are the same height. This can help create a more polished and uniform appearance for your Blog module.
.wpp-blog-grid .entry-featured-image-url { padding-top: 56.25%; } .wpp-blog-grid .entry-featured-image-url img { position: absolute; height: 100%; width: 100%; top: 0; object-fit: cover; }
Now the featured images on your blog post cards will have the same height!
The Bottom Line
The default limitation of only three columns in the grid layout of the Divi Blog module can be frustrating for creating a blog design that meets your specific needs.
This tutorial shows you how to adjust the number of Blog module columns to your desired amount with a responsive layout that automatically adjusts the number of columns based on the user’s screen size using Grid CSS.
And to streamline your workflow, you can save the snippet to Divi Cloud so that you can access it from all websites you build with Divi.