Sometimes we need each Column to have the same height, regardless of the content each Column has.

Let's have a look at this example:

In this layout, we have three text modules, each text module has a different background color, and the content in each text module is different. This creates an uneven height for each text module. Our purpose is to have each Column have the same height.

First, we will need to remove the background color from each text module and instead apply that background color to each of our columns. The result will be:

Nothing has changed from our initial layout. However, since we have moved the background color from being applied to each text module and applying it to each Column, we can equalize their heights using the Equalize Column Heights option. 

How to equalize column heights

  1. Edit the Row Settings

  2. In the Design Tab, open Sizing.

  3. Enable the Equalize Column Heights option.

The result will be:

Note: The height of the Column refers to the Column itself and not to the content inside a column.

Observation: if the Modules inside each Column contain other properties, like Box Shadow, Border Radius, etc., those properties need to be reset on the Module's level and applied to the Column itself.

Did this answer your question?