5 Ways To Create Responsive Equal Height Columns With CSS

Welcome to a tutorial on how to create equal height columns using pure CSS. Want to line up columns equally and nicely?

That’s all for the “quick fix”, but there are other ways to do it with CSS. Read on for more examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	Equal Columns	Useful Bits & Links
The End

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

METHOD 1) FLEXIBLE CONTAINER

<style>
/* (A) ON BIG SCREENS */
.flex-wrap { display: flex; }
.flex-wrap > * { flex: 1; } /* equal column width */
 
/* (B) ON SMALL SCREEN - COLLAPSE INTO ROWS */
@media (max-width: 768px) {
  .flex-wrap { display: block; }
}
</style>

<!-- (C) HTML UNEQUAL COLUMNS -->
<div class="flex-wrap">
  <div>First</div>
  <div><p>Second</p> <p>Second</p></div>
  <div><p>Third</p> <p>Third</p> <p>Third</p></div>
</div>

As in the above introduction, the CSS flexible box is one of the easiest ways to create equal columns; A display: flex container will lay items out in a left-to-right manner by default, with equal height. Although we can also control this behavior in many ways – Check out the links in the extras section below if you want to learn more.

 

METHOD 2) GRID CONTAINER

<style>
/* (A) ON BIG SCREENS */
.grid-wrap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* equal column width */
}
 
/* (B) ON SMALL SCREEN - COLLAPSE INTO ROWS */
@media (max-width: 768px) {
  .grid-wrap { display: block; }
}
</style>
 
<!-- (C) HTML UNEQUAL COLUMNS -->
<div class="grid-wrap">
  <div>First</div>
  <div><p>Second</p> <p>Second</p></div>
  <div><p>Third</p> <p>Third</p> <p>Third</p></div>
</div>

CSS grid is another modern CSS convenience. All we need to do – Define a display: grid container and define the columns grid-template-columns. Once again, there are various ways to control the grid layout, will leave links below.

 

 

METHOD 3) DISPLAY AS TABLE

<style>
/* (A) ON BIG SCREENS */
.table-wrap {
  display: table;
  width: 100%;
}
.table-wrap > * {
  display: table-cell;
  width: 33%; /* equal column width */
}

/* (B) ON SMALL SCREEN - COLLAPSE INTO ROWS */
@media (max-width: 768px) {
  .table-wrap, .table-wrap > * {
    display: block;
    width: 100%;
  }
}
</style>

<!-- (C) HTML UNEQUAL COLUMNS -->
<div class="table-wrap">
  <div>First</div>
  <div><p>Second</p> <p>Second</p></div>
  <div><p>Third</p> <p>Third</p> <p>Third</p></div>
</div>

Yes, this is one funky way and easy at the same time. So just how does it work? Because cells in an HTML table will always match the height of the tallest one, and so, we just make use of that characteristic – Turn the container to act just like a <table>, and set the items to act like table cells.

 

 

METHOD 4) PADDING TRICK

<style>
/* (A) ON BIG SCREENS */
/* (A1) HIDE SCROLL BARS */
.pad-wrap { overflow: hidden; }
.pad-wrap > * {
  /* (A2) FLOAT ALL ITEMS TO THE LEFT */
  float: left;
 
  /* (A3) GIVE INSANE BOTTOM PADDING & "COUNTER" WITH BOTTOM MARGIN */
  padding: 10px 10px 99999px 10px;
  margin-bottom: -99999px;
 
  /* (A4) EQUAL COLUMN WIDTH */
  width: 33%;
}
 
/* (B) ON SMALL SCREEN - COLLAPSE INTO ROWS */
@media (max-width: 768px) {
  .pad-wrap > * {
    float: none;
    padding-bottom: 10px;
    margin-bottom: 0;
    width: 100%;
  }
}
</style>
 
<!-- (C) HTML UNEQUAL COLUMNS -->
<div class="pad-wrap">
  <div>First</div>
  <div><p>Second</p> <p>Second</p></div>
  <div><p>Third</p> <p>Third</p> <p>Third</p></div>
</div>

This is an old-school method, a “CSS hack” that we roll in the early 2000s.

• (A2) The basic idea is to set float: left on all the items, so they form a horizontal row.
• (A3) But the items will each have a different height. To “trick” the browser into rendering all the items at equal height, we set an insane amount of padding-bottom, then “counter” it back with a negative margin-bottom.
• (A1) Then again, this padding trick will cause another issue, an ugly scrollbar. This is where we use overflow:hidden to hide it.

 

METHOD 5) FAUX EQUAL COLUMNS

<style>
/* (A) ON BIG SCREENS */
/* (A1) FAUX COLUMNS WITH LINEAR GRADIENT */
.faux-wrap {
  overflow: hidden;
  background-image: linear-gradient(to right, #ffebeb 33%, #d5ffd2 33%, #d5ffd2 66%, #eae9ff 66%, #eae9ff 100%);
}
 
/* (A2) EQUAL COLUMNS */
.faux-wrap > * {
  float: left;
  width: 33%;
}
 
/* (B) ON SMALL SCREEN - COLLAPSE INTO ROWS */
@media (max-width: 768px){
  .faux-wrap { background: none; }
  .faux-wrap > * {
    float: none;
    width: 100%;
  }
  .faux-a { background: #ffebeb; }
  .faux-b { background: #d5ffd2; }
  .faux-c { background: #eae9ff; }
}
</style>

<!-- (C) HTML UNEQUAL COLUMNS -->
<div class="faux-wrap">
  <div class="faux-a">First</div>
  <div class="faux-b"><p>Second</p> <p>Second</p></div>
  <div class="faux-c"><p>Third</p> <p>Third</p> <p>Third</p></div>
</div>

Lastly, this is yet another old-school method, an alternative to the previous method.

• (A2) The basic idea is the same, we float the items to create a single row.
• (A1) But instead of “fixing” the height issue, we make it look like they have equal height… By adding a linear gradient background color to the container that matches the columns.

 

 

 

WHICH IS THE BEST METHOD?

Personally, I will stick with flex or grid. These are already well-supported in almost every modern browser at the time of writing… But if you have to support the ancient Internet Exploders, the “CSS hacks” are your only choices.

 

LINKS & REFERENCES

• A Complete Guide to Flexbox – CSS Tricks
• A Complete Guide to Grid – CSS Tricks
• 5 Ways to Display Div Containers Side By Side – Code Boxx

 

INFOGRAPHIC CHEAT SHEET