Create Columns with Equal Heights

X Theme and Pro Theme11 Comments

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!

Method 1: Flexbox

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.

.flexmethod {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.x-container:before {
  content: normal;
}
March 24, 2017
Some Safari users have reported problems with the flexmethod CSS. It appears to be related to the :before pseudo element. As such, we’ve added to the above CSS with a fix.

Flex Method in Action

Sample Headline

Bacon ipsum dolor amet landjaeger hamburger sirloin, porchetta brisket cupim prosciutto sausage ball tip capicola boudin bacon

Sample Button

Sample Headline

Bacon ipsum dolor amet landjaeger hamburger sirloin, porchetta brisket cupim prosciutto sausage ball tip capicola boudin bacon bresaola. Beef doner ball tip sausage turducken t-bone cow, pork belly alcatra beef ribs shoulder pastrami pork loin. Ground round pancetta bresaola burgdoggen pig rump.

Sample Button

Sample Headline

Bacon ipsum dolor amet landjaeger hamburger sirloin, porchetta brisket cupim prosciutto sausage ball tip capicola boudin bacon

Sample Button

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.

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
      -ms-flex-direction: column; 
          flex-direction: column;
}
.item-button {
  margin-top: auto;
}
.x-container:before {
  content: normal;
}

Method 2: JavaScript

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.

Need to equalize more than one row on a page, and want those rows to have independent heights?

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:

JavaScript Method in Action

Sample Headline

Bacon ipsum dolor amet landjaeger hamburger sirloin, porchetta brisket cupim prosciutto sausage ball tip capicola boudin bacon

Sample Headline

Bacon ipsum dolor amet landjaeger hamburger sirloin, porchetta brisket cupim prosciutto sausage ball tip capicola boudin bacon bresaola. Beef doner ball tip sausage turducken t-bone cow, pork belly alcatra beef ribs shoulder pastrami pork loin. Ground round pancetta bresaola burgdoggen pig rump.

Sample Headline

Bacon ipsum dolor amet landjaeger hamburger sirloin, porchetta brisket cupim prosciutto sausage ball tip capicola boudin bacon

Bonus: Marginless JavaScript Grid

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.

Method 3: Marginless Column Method

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.

Marginless Method in Action

Sample Headline

Bacon ipsum dolor amet landjaeger hamburger sirloin, porchetta brisket cupim prosciutto sausage ball tip capicola boudin bacon

Sample Headline

Bacon ipsum dolor amet landjaeger hamburger sirloin, porchetta brisket cupim prosciutto sausage ball tip capicola boudin bacon bresaola. Beef doner ball tip sausage turducken t-bone cow, pork belly alcatra beef ribs shoulder pastrami pork loin. Ground round pancetta bresaola burgdoggen pig rump.

Sample Headline

Bacon ipsum dolor amet landjaeger hamburger sirloin, porchetta brisket cupim prosciutto sausage ball tip capicola boudin bacon

11
Leave a Reply

avatar
  Subscribe  
Notify of
Ian
Ian

Brilliant! Thaks for sharing Roy.

Janine

Fab! Does the Flexbox method work in Safari? Doesn’t seem to be working on my end (Safari Version 10.0.2)

Bill

I tried to use the CSS method to make 3 CTA cards in XPro the same height but it didn’t work. The three cards are in a 3 column row. (The site is currently private and in development)

Michael Bourne

Hey Bill,

The cards work a little differently, this is for making columns the same height.You will have to add some additional CSS to the cards to make them full height (along side the CSS method for the columns).

Rod

I used the css method and it worked great with one hiccup. I have icons in all 3 columns and the icon in the first column aligns left while the other two are center. Any thoughts on a fix?

Rod

Never mind. I accidentally added ‘flexmethod’ to the column class.

Michael Bourne

Glad you got it sorted!

Jade

Hi Guys,

I’ve tried this and it works great to make the columns an equal height – perfect when they are a shaded background and the columns have margins.

When I tried to code to get the buttons to display at the bottom, they do so but the look changes as if they are set as blocks, and I can’t work out how to fix it. Any ideas?.

Jill
Jill

Do these methods work for a WooCommerce shop where products should have a same height?

Michael Bourne

Technically this will work for any block elements, so yes, you could edit the woo templates to use flex classes, or use the jsmethod on the appropriate woo div class.