A layout seems so incomplete, unplanned, and unprofessional without a grid plan. Not gonna talk about CSS grid framework in this post; but will be talking about ways to pull equal-heighted columns, that are used for various purposes in front-end Web development.

Live Demonstration

In case you are looking for hybrid grid layouts; check out CSS-only masonry.

I have soome basic examples to remind you of the usage of equal-height columns on web: image grids in photo galleries, blog posts or portfolio showcase aligned in a grid fashion, and content and sidebar columns of a website.

A few years ago, we used to achieve that effect with some CSS trickery; table display properties for the grid elements was one popular way to get the effect done. Today, we have rather simpler and semantically sane solutions to create equal-height columns with CSS3.

The mystery of equal-height columns in CSS

I want to tell you how I used to create fake grids before I learned the proper technique to do that. I used to make grid cells block-level, then float them left, give them a percentage width, give them some height as per the need, add padding or margins, clear floats and done!

In this article, I’m going to cover all the possible ways I know to create equal-column grid with CSS. Let me list them below and link them to their specific sections for your ease:

  1. CSS Table properties
  2. Flexbox properties
  3. The brand new CSS Grids

What should you pick from the above solutions? Well, it’s up to you. If you want robust support, and want the grid work in “ancient” browsers as well, then #1 is for you, (however it’s not an ideal way to do so).

Rest of the two solutions are for those who prefer things to work on modern browsers only.

Launch the All-in-one Demo

Equal-height Columns with CSS Table properties

Going old school, we can make use of Table properties in CSS to achieve equal-height columns, but as I told above, it’s not an ideal solution now to create layouts, as we have support far better, newer technologies to do so.

HTML

For a two-column layout, we have the markup like below:

  • The parent division (<div class="t-grid">) that acts like the <table> element
  • The child division (<div class="t-grid-row">), that acts like table-row (<tr>).
  • The grand-child div (<div class="t-grid-cell">), that behaves like the table-cell (<td>)
<div class="t-grid">
  <div class="t-grid-row">
    <div class="t-grid-cell t-content">...</div>
    <div class="t-grid-cell t-sidebar">...</div>
  </div><!-- .t-grid-row -->
</div><!-- .t-grid -->

The CSS

Now comes the important part, the styling. We are about to give our table div, table-row div, and table-cell div their respective properties.

/* The Table Grid */
.t-grid {
  display: table;
  border-spacing: 1em;
  border-collapse: separate;
}

/* The row */
.t-grid-row {
  display: table-row;
}

/* The cell */
.t-grid-cell {
  display: table-cell;
  background-color: #fff;
  padding: 1em;
  background-color: #ccc;
  vertical-align: top;
}

/* Content-column */
.t-content {
  width: 65%;
}

/* Sidebar-column */
.t-sidebar {
  width: 35%;
}

[wp_ad_camp_1]

In case those borders on the left and right of the table layout are bothering you, you’ll need to do some calc() and margin math in order to work the table borders on the left and right.

.t-grid {
  margin: 0 -1rem;
}

Equal Columns Using Flexbox

Unlike tables (and floating divs here and there), Flexbox is way too simplified and easier approach to achieve equal-heighted columns in CSS. You don’t even need to provide a separate row element for the columns, all we need here is to tweak the Flexbox parent and the childs a bit to make them look aligned like a columnar grid.

HTML

<div class="f-grid">
  <div class="f-grid-cell f-content">...</div>
  <div class="f-grid-cell f-sidebar">...</div>
</div><!-- .f-grid -->

CSS

In order to make them appear with a gutter (say of width X), we need to shift the parent little left, i.e. -X. Now obviously with the child elements, we’ll be subtracting X from the flex-basis and then give them a left margin equal to X.

.f-grid {
  display: flex;
  justify-content: space-between;
  margin-left: -1rem;
  flex-flow: row wrap;
}

.f-grid-cell {
  flex: 1 0;
  background-color: #333;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

Confused dealing with CSS flexbox? I know a fun game to learn it, go play FlexboxFroggy!

Equal columns using CSS Grid

Our last method involves the use of CSS Grid, which is the easiest possible approach to get columns done, hands down. All you need is to set the parent’s display to grid, set up the column template (width and stuff), may provide row and column-gap (gutter) if you want, and you are good to go!

HTML

<div class="g-grid">
  <div class="g-grid-cell">...</div>
  <div class="g-grid-cell">...</div>
</div><!-- .g-cols -->

CSS

To save the layout from bleeding out, you’ll also need to do some math here. We can clearly observe that in a grid of n columns, there will n-1 number of gutters in it. If W is the width of a column, and G is the width of the grid gutter, it should be adjusted using the below formulae:

W(adjusted) = W(original) – (G * (n-1)/n)

.g-grid {
  display: grid;
  /* W(adjusted) = W(individual) - (1rem * 1/2) */
  grid-template-columns: calc(65% - 1rem * 1/2) calc(35% - 1rem * 1/2);
  grid-column-gap: 1rem;
}

.g-grid-cell {
  padding: 1rem;
}

New to CSS Grid? Another fun place to learn it in minutes, go CSSGridGarden.

Are the above mentioned code is mobile-ready? Well, nope. But the demonstrations are! You may modify the above code and make it mobile-friendly according to your need, would be a fun excercise, wouldn’t it be? It’s not that tough!

Or you may directly jump at the demonstration and inspect the code to cheat a bit if you want.

Wrapping up, I hope you enjoyed the article, found it useful, or learned something new from it. If so, please take your time to share it with others, and follow us for more stuff like this.

Read further