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
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
<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>
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
<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>
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
<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>
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
<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>
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 negativemargin-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>
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
- 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

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!