Create Columns with Equal Heights

A common request we see on the X Theme Users forum is to create equal height columns in Cornerstone. We’re going to cover three ways to do this in X. Yup, three ways!

A little bit of CSS, added either to the page if you want it for one page, or to the Customizer if you want it for multiple pages, gives you the building block you need. Then add the class ‘flexmethod’ to the row (not the column). Its quick. Unlike the JavaScript method it shows equal height columns immediately. The downside to this is that if you have multiple rows this is applied to, the height of the columns will only be equal within each row, preventing you from achieving a proper grid layout if that is your goal.

Some of you might have also noticed that buttons are aligned to the bottom. As bonus, I’ve added that CSS to the post. We have .container and a .item-button. Add the first as a class to the column and the second as a class to the button.

We can achieve the same result with some Javascript. The benefit of js is that you can apply equal height columns to both block and table layouts, as well as apply advanced math or formulas across several rows. A big plus for the javascript method is that the height of the columns will be equal across all rows, giving a grid-like effect. The disadvantage to this is the initial load time. Although only milliseconds on fast connections, the columns will initially appear at different heights and then a moment later will adjust heights. Just like the previous CSS method, you can place this JavaScript in either the page’s Custom JS section of the Customizer’s Global JS section. Once done, add the class equalize to the rows you want it applied to. This script was originally provided by Themeco and edited by me to allow window resizing and respect padding within the column.

The code above works great, but if you apply the equalize class to more than one row, they will all end up the same height. If you’d like to change that, use this code instead:

This uses the same code as above, but will also set the proper width of each column based on how many are present in the first row, and remove the margins. This is perfect for making your own grid-like layout. Simply create as many rows as you want with the class jsmethodgrid on each row you want the effect applied to. Make the same number of columns in each row.

Want to know what code you need for marginless columns? None. That’s right. The sample below has no JS and no CSS. Marginless columns are automatically the same height. Depending on your content you may be able to use this method your advantage. In the sample below I’ve enabled the same border on all columns and the row. This gives a uniform look to the border.
Marginless columns can be set in the row element in Cornerstone, right below the column container toggle.