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?

One of the easiest ways to create equal height columns is to simply use a flexible container:

  • .flex { display: flex; }
  • <div class="flex"> <div>COL 1</div> <div>COL 2</div> </div>

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

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

 

RESPONSIVE EQUAL HEIGHT COLUMNS

All right, let us now get into the various examples and ways to create equal height columns.

 

METHOD 1) FLEXIBLE CONTAINER

1-flex.html
<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>
First

Second

Second

Third

Third

Third

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

2-grid.html
<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>
First

Second

Second

Third

Third

Third

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

3-table.html
<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>
First

Second

Second

Third

Third

Third

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

4-pad.html
<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>
First

Second

Second

Third

Third

Third

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

5-faux.html
<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>
First

Second

Second

Third

Third

Third

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.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

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

 

INFOGRAPHIC CHEAT SHEET

How To Create Equal Height Columns (Click to Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *