Equal Height Columns

Sometimes you may wish to have columns sharing an equal height due to design aspects, such as guaranteeing that the backgrounds are aligned both top and bottom.

Furthermore, you can’t usually guarantee that the content inside them will occupy the same height for every screen size. You can fix this using Minimum Height and Responsive Rows.

Minimum Height And Responsive Rows

Let’s say you have a row with a width of 960px, and multiple columns with content inside with slightly varying height (such as text paragraphs). Here’s what you can do:

1. Add single column rows inside each of the multiple columns
2. Add 5px spacing to both the outer row and each of those single inner rows you have added on step 1., and add a background color to their inner columns.
3. Move the content from the outer columns to the new inner columns
4. Toggle Layout mode off, and check accross screen sizes which column is the one that occupies most vertical space. Chose one if they happen to be all the same height.
5. Toggle Layout mode on, and change the chosen column’s minimum height value until the column grows vertically, beyond its content, just slightly. Copy that value.
6. Go to the other columns and change their minimum height to that value as well
7. With Layout mode off, check accross screen sizes when the content bypasses the minimum height of the columns, and change the parent row’s responsive mode setting to that value.

By this point, on larger screens your columns will be stacked sidebyside with each other, occupying the same height, and once the screen is too small to have them there, they will instead stack vertically.