Source: https://divicake.com/blog/divi-blog-grid-equal-height/ [Blog](https://divicake.com/blog/)/[Blogging](https://divicake.com/category/blogging/) # Divi Blog Grid Equal Height - How to Equalize the Posts' Height By Divi Cake·7 October 2024·Updated 19 August 2026·5 min read Divi Blog Grid Equal Height – How to Equalize the Posts’ Height We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Step 1: Applying Divi Equal Height Setting Option](https://divicake.com#step-1-applying-divi-equal-height-setting-option) - [Result](https://divicake.com#result) - [Step 2: Applying Blog Module Settings for Equal Height](https://divicake.com#step-2-applying-blog-module-settings-for-equal-height) - [Result - Uniform Blog Column Heights Achieved](https://divicake.com#result---uniform-blog-column-heights-achieved) - [Step 3: Adding Custom Code for Equal Heights](https://divicake.com#step-3-adding-custom-code-for-equal-heights) - [Step 5: Adding Custom JavaScript for Enhanced Functionality](https://divicake.com#step-5-adding-custom-javascript-for-enhanced-functionality) - [Result after applying Code](https://divicake.com#result-after-applying-code) - [Conclusion](https://divicake.com#conclusion) If you’re struggling to make your [Divi](https://divicake.com/go/divi/) blogs grid equal in height, you’re not alone! We’re here to address this issue in three simple ways, ensuring that your problem is resolved. Our aim is to offer clear and detailed solutions that are simple and easy to follow. First, we will explore Divi’s built-in Equal Height setting. Next, we’ll delve into the Blog Module Settings, focusing on adjusting the Excerpt Length. Lastly, we will implement custom coding to achieve the desired effect. ## Step 1: Applying Divi Equal Height Setting Option In this first step, we will utilize Divi’s built-in Equal Height setting to achieve uniformity in your blog post columns. Here’s how to do it: - Hover Over the Row Settings: Hover your mouse over the row containing your blog posts, then click on the Row Settings icon (the green icon) to access the settings. - Access the Design Tab: Once in the Row Settings, navigate to the [Design tab](https://divicake.com/blog/getting-started-with-divi-design-settings/). - Locate Sizing: Scroll down to find the Sizing option and click on it. This will open the Sizing settings. - Enable Equal Column Heights: In the Sizing settings, look for the option labeled Equal Column Heights and toggle it to Yes. This will ensure that your blog columns are of equal height. Applying Divi Equal Height setting to achieve uniform blog post columns, including accessing row settings, navigating the design tab, locating sizing options, and enabling equal column heights for a consistent appearance. ## Result The screenshot below demonstrates the outcome after applying Divi’s built-in module setting for equal column heights. Visual result of applying Divi’s built-in module setting for equal column heights, showing uniform blog columns with consistent height across all posts. Read More: [7 Divi Tab Modules for Improving User Experience](https://divicake.com/blog/divi-tab-modules/) ## Step 2: Applying Blog Module Settings for Equal Height In this step, we will adjust the Divi Blog Module settings to achieve equal heights by modifying the Excerpt Length. Here’s how to do it: - Hover Over the Blog Module: Position your mouse over the blog module you wish to edit, and click on the Settings button. This will open the blog settings panel. - Access the Content Tab: Once the blog settings are open, navigate to the [Content Tab](https://divicake.com/blog/getting-started-with-divi-content-settings/). - Enable Post Excerpt: Scroll down to find the Use Post Excerpt option. Toggle it to Yes to enable excerpts for your blog posts. - Set Excerpt Length: Next, scroll down to the Excerpt Length setting. Adjust the word limit to a minimum of 200 words. This will help ensure that all your blog columns have equal height. By following these steps, you should see that your blog columns are now uniform in height. Adjusting Divi Blog Module settings for equal column heights by modifying the Excerpt Length. Read More: [How to Feature a Blog Post in Divi](https://divicake.com/blog/how-to-feature-a-blog-post-in-divi/) ## Result - Uniform Blog Column Heights Achieved After applying the Blog Module’s Excerpt Limit, you should observe that all your blog columns now maintain the same height. The screenshot below illustrates the results, showcasing the uniformity achieved across all blog posts. Display of uniform blog columns after applying the Blog Module’s Excerpt Limit in Divi, illustrating consistent column height across all blog posts for a balanced layout. ## Step 3: Adding Custom Code for Equal Heights In this step, we will apply a custom class to the row to ensure equal heights using coding. Follow these instructions: - Edit the Row Settings: Click on the Settings Icon for the row you want to edit. - Navigate to the Advanced Tab: Once the row settings are open, go to the [Advanced tab](https://divicake.com/blog/getting-started-with-divi-advanced-settings/). - Add a Custom Class: In the CSS ID & Classes section, add a custom class named .equal-height-column - Save Your Changes: Click Save to apply the changes. Refer to the screenshot below for guidance on where to input the custom class. A visual guide showing how to add a custom class to a row in Divi to achieve equal height columns using CSS coding. ## Step 5: Adding Custom JavaScript for Enhanced Functionality To finalize the setup and ensure everything works seamlessly, you will now add some custom JavaScript. Follow these steps: - Navigate to Theme Options: From your WordPress dashboard, go to Divi > Theme Options. - Access the Integration Tab: Click on the Integration tab. - Add JavaScript Code: Scroll down to the Add code to the < head > of your blog box and insert the following JavaScript code: Steps to add custom JavaScript in Divi Theme Options to ensure equal height for blog columns using the ‘equal-height-row’ class. ## Result after applying Code In the screenshot below, we display the final result after inserting the JavaScript code and applying a class to the row. When we increase the heading text size, the column automatically adjusts its height accordingly. Similarly, when we reduce the text size, the column height decreases as well. Read More: [Divi Custom Modules (Beginner’s Guide)](https://divicake.com/blog/divi-custom-modules/) ## Conclusion Achieving equal heights for your Divi blog columns helps ensure a visually balanced and professional layout. With the methods outlined in this tutorial—using Divi’s built-in settings, adjusting Blog Module options, and applying custom CSS and JavaScript—you can easily resolve uneven column heights. These steps are accessible for both beginners and experienced developers, allowing you to create a cohesive and appealing blog design without much hassle. Should you run into any issues, don’t hesitate to ask for support in the comments section. If you encounter any difficulties or have further questions, feel free to ask in the comments. Read More: [Divi Code AI: WordPress/Divi Web Development with AI](https://divicake.com/blog/divi-code-ai/) ## Written by Divi Cake Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week. - [About Divi Cake](https://divicake.com/about/) ## Get the Divi Cake newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi 5 migration](https://divicake.com/divi-4-to-divi-5-migration/) - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Newsletter New Divi tutorials and Divi Cake product news, by email. First name (optional)Email Company website SubscribeSubscribeSubscribe Unsubscribe any time. [Privacy policy](https://divicake.com/privacy/) The sign-up form needs JavaScript for its spam check. Almost done. Click the link in the email we just sent to confirm your subscription. If you are already subscribed, there is nothing more to do. ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Blogging [ How to make money with Divi Blogging10 min read ### How to Make Money with Divi Nine ways to earn an income with Divi — affiliate marketing, services, digital products, courses, memberships, sponsored posts and ads — and what your site needs before any of them work. 15 October 2026](https://divicake.com/blog/make-money-with-divi/) [ Customizing Divi for advanced WordPress development projects Blogging4 min read ### Customizing Divi for Advanced WordPress Development Projects Seven ways to take Divi past its stock settings on an advanced build: custom CSS and JavaScript, child themes, integrations, hooks and filters, and performance work. 11 October 2026](https://divicake.com/blog/customizing-divi/) [ Selling Divi websites and child themes Blogging10 min read ### How to Make Money Selling Divi Websites and Child Themes How to earn from Divi three ways: building sites for clients, selling finished websites through a brokerage or marketplace, and packaging child themes for sale. 29 September 2026](https://divicake.com/blog/selling-divi-websites-and-child-themes/)