Source: https://divicake.com/blog/how-to-equalize-column-heights-in-divi/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # How to Equalize Column Heights in Divi By Divi Cake·26 September 2019·Updated 19 August 2026·3 min read How to Equalize Column Heights in Divi We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Example of Unequal Heights](https://divicake.com#example-of-unequal-heights) - [Equalizing the Column Heights](https://divicake.com#equalizing-the-column-heights) - [Equal Column Height Examples](https://divicake.com#equal-column-height-examples) - [Ending Thoughts](https://divicake.com#ending-thoughts) Have you ever created or used a layout in Divi that looks amazing, only to have odd gaps in a row because the modules have different heights? This happens with you have a few words in one module that sits next to another module with a lot of words. This explains why sometimes our designs don’t look as nice as a demo layout. The demo content typically uses modules with the same length, but when you add your own content that length will change. Fortunately, there is an easy way to design your layouts so the column-heights are equal. In this article, we’ll look at how to equalize the column heights in Divi so your layouts will remain visually appealing no matter how imbalanced the content in a single row becomes. ## Example of Unequal Heights I’ll use blurbs for my examples, but this is true of any type of module that displays the content of various sizes. This example shows a few blurbs with content at various lengths. It would look cleaner and nicer if the blurbs were the same size regardless of their content. This stands out, and not in a good way. This is even more obvious if we use different background colors. Colors with greater contrast stand out even more. As a visual design, this would be more pleasing to the eye if the blurbs were the same size. ## Equalizing the Column Heights The easiest method to make each of the blurbs the same size is to push the issue back to the next element. Rather than dealing with module sizes, we’ll deal with column sizes. This removes the issue of dealing with the sizes of the blurbs, text modules, or whatever module you’re using. We’ll simply make the columns the same size. Then, it wouldn’t make any difference which modules we used. This only works for the columns within the same row. We’ll accomplish this by moving the color and other design settings from the blurb and place them in the column. Be sure to use the same settings. In this example, it includes the box shadow in the module’s design settings. The blurb on the left has the color and box shadow removed. I’ve now added the color and the box shadow to the column background. The layout is exactly the same as before. There is no visual difference. Repeat this process for each of the columns. Once you have your color and settings added to your row, it’s time to equalize the heights. In the Row settings, go to the Design tab an enable Equalize Column Heights. Each column is now automatically the same height. ## Equal Column Height Examples The columns are now the exact same height, even though their content is of various lengths. The colors remain with the columns, so I can move the blurbs around or replace them with text modules and the color remains in place. In this example, I’ve swapped the middle and right modules, but the colors have remained in place. If I want to move the content and have them to keep their colors, I can move the columns within the row settings. This moves everything associated with the column. For this example, I’ve added a text module to the column in the available space of the center module. I didn’t have to customize the background color or box shadow because that’s already done in the column. I could replace the blurb with a different module with no trouble. In this example, I’ve added a button to each column. The only adjustments I’ve made to the buttons are to add a box shadow and use center alignment. I’ll make a few adjustments. For this one, I’ve added some margin space to the bottom of the buttons so they don’t touch the bottom of the column. For this one, I’ve removed the box shadow and added more content to the middle blurb. The button automatically moves down and the columns remain the same size. For this one, I’ve added more content to the blurb on the right. The columns automatically expand to make room and all of the columns remain equal in height. Read More: [Divi Blog Grid Equal Height – How to Equalize the Posts’ Height](https://divicake.com/blog/divi-blog-grid-equal-height/) ## Ending Thoughts That’s our quick look at how to equalize the column heights in Divi. My first thought is usually to add the color, box shadow, and borders to the modules, but adding them to the columns in the rows opens up a lot of design possibilities. It’s easy to do thanks to the intuitive settings of the Divi sections, rows, and modules. Do you equalize the column heights in your Divi designs? Let us know about it in the comments. ## 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. ## 1 comment - Bryan Alexander18 August 2023 at 21:53 I’ve selected to equalize the colum height but it doesn’t work. My columns are still unequal. Any idea what I’m doing wrong? ## 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 Tips & Tricks [ 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/) [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/)