To make your Divi blog posts the same height, you need to properly configure your Blog module using a Grid layout and a custom CSS class, then apply specific Flexbox CSS to ensure all post elements expand uniformly. This approach provides a consistent and visually appealing grid layout for your blog.
Why Blog Posts Have Uneven Heights in Divi
Blog posts in Divi often appear with uneven heights when displayed in a grid layout due to variations in content. Factors like longer titles, different excerpt lengths, or the presence/absence of featured images can cause some post cards to be taller than others. While Divi offers an "Equalize Column Heights" option, it typically applies to columns within a row, not the individual post items within a Blog module itself. Therefore, a combination of module settings and custom CSS is the most effective solution.
Step-by-Step Guide to Equalizing Divi Blog Post Heights
Achieving uniform blog post heights involves two main steps: configuring your Divi Blog module and then adding custom CSS.
1. Configure Your Divi Blog Module
This initial setup ensures your blog module is ready to receive the custom styling for equal heights.
- Open Blog Module Settings: Navigate to your page in the Divi Builder, hover over your Blog module, and click on the Gear icon to open its settings.
- Set Layout to Grid:
- Go to the Design Tab.
- Select the Layout option.
- Choose Grid from the available layouts. This will arrange your blog posts in a grid format, which is a prerequisite for equal height consistency.
- Assign a Custom CSS Class:
- Go to the Advanced Tab.
- Click on CSS ID & Classes.
- In the CSS Class field, enter a unique class name, for example:
equal-height-blog. This class will be used to target your specific blog module with custom CSS.
2. Add Custom CSS for Equal Heights
Once your module is configured, you'll apply Flexbox CSS to ensure each blog post card within the grid expands to the same height. This CSS should be added to your website.
/* Custom CSS to Equalize Divi Blog Post Heights */
.equal-height-blog .et_pb_ajax_pagination_container article {
display: flex;
flex-direction: column;
height: 100%; /* Ensures the article takes up its full grid cell height */
}
.equal-height-blog .et_pb_ajax_pagination_container article .entry-featured-image-url {
/* Ensures the featured image does not interfere with content flexing */
flex-shrink: 0;
}
.equal-height-blog .et_pb_ajax_pagination_container article .et_pb_post_container {
display: flex;
flex-direction: column;
flex-grow: 1; /* This is key: makes the content area expand to fill available space */
}
.equal-height-blog .et_pb_ajax_pagination_container article .post-content {
flex-grow: 1; /* Allows the text content section to expand */
display: flex;
flex-direction: column; /* To make sure elements within (like buttons) can be pushed down */
justify-content: space-between; /* Distributes space, pushing buttons to the bottom */
}
.equal-height-blog .et_pb_ajax_pagination_container article .et_pb_read_more {
margin-top: auto; /* Pushes the 'Read More' button to the bottom of the card */
align-self: flex-start; /* Aligns the button to the start if using space-between on parent */
}Explanation of the CSS:
.equal-height-blog .et_pb_ajax_pagination_container article: This targets each individual blog post card (<article>) within your designated blog module. By settingdisplay: flex;andflex-direction: column;, it transforms each card into a Flexbox container.height: 100%;ensures the card can occupy the full height available to it within the grid..et_pb_post_container: This is the main content wrapper within each blog post card. Setting it todisplay: flex; flex-direction: column;and criticallyflex-grow: 1;allows it to expand and fill any remaining vertical space in the card, ensuring all cards stretch to the tallest height..post-contentand.et_pb_read_more: These rules further refine the layout within the content area, making sure that the main text content also expands and that the "Read More" button is consistently pushed to the bottom of the card, regardless of the excerpt length.
Where to Add Your Custom CSS
You have several options for adding this CSS to your Divi website:
- Divi Theme Options: Go to Divi → Theme Options → General and scroll down to the Custom CSS box. This is the simplest method for site-wide application.
- Child Theme
style.css: For more organized and update-proof custom code, add it to your child theme'sstyle.cssfile. - Page-Specific CSS: If you only want to apply this to a single page, open the page settings (the gear icon at the bottom of the Divi Builder) and navigate to Advanced → Custom CSS.
Important Considerations for Equal Height Blog Posts
| Step | Location | Action |
|---|---|---|
| Open Blog Module Settings | Gear icon | Access blog module options |
| Set Layout to Grid | Design Tab > Layout | Ensure posts are displayed in a grid |
| Assign Custom CSS Class | Advanced Tab > CSS ID & Classes | Add equal-height-blog (or your chosen class) |
| Add Custom CSS | Theme Options / Child Theme | Implement Flexbox code for equalization |
- Responsiveness: Always test your blog page on various devices (desktop, tablet, mobile) to ensure the equal height styling works correctly across all screen sizes. Flexbox is inherently responsive, but minor adjustments might be needed.
- Content Consistency: While CSS forces equal heights, aiming for somewhat consistent content lengths (especially excerpts) can lead to a more aesthetically pleasing design without large gaps in text.
- Image Aspect Ratios: Ensure your featured images have a consistent aspect ratio to prevent them from distorting or causing unexpected height variations. Divi often crops images, but consistency helps.
Additional Tips for Consistent Blog Layouts
- Standardize Excerpt Lengths: Consider using a plugin or custom code to automatically truncate blog post excerpts to a uniform character count.
- Maintain Image Sizes: Upload featured images that are consistently sized or use Divi's image module settings to enforce specific dimensions.
- Utilize Divi's Spacing Settings: After applying the custom CSS, use the Divi Blog module's Design Tab → Spacing settings to fine-tune margins and padding for optimal visual balance between elements.
By following these steps, you can effectively ensure all your blog posts display with a uniform height in Divi, creating a clean, professional, and consistent blog grid layout.
