While looking over a competitor's newly designed website, I saw they were using float and an after element to make equal height columns. This got me to thinking about all of the different ways that you can make an equal height column layout.
Below I'm going to go over various ways to layout content to be equal height.
Using :after and float
This is the method I mentioned earlier. It's not something I have used before and is meant more for vertically centering content.
Pros:
- Columns are equal height
- The columns have a max height set so they will never get taller than you want and they will scale down vertically as the page narrows.
Cons:
- The height isn't dynamic. If content runs long it will expand outside of the container.
- Requires rows so if you want to swap from a 3 column layout to a two column as the browser this doesn't allow for it.
The HTML
The HTML is a typical grid layout. You have a row containing your columns.
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
The CSS
For the CSS you have a row with a clearfix. Then the columns that have max-height's set to limit the padding-top:100% from expanding too far.
.row:after {
content: "";
display: table;
clear: both;
}
.col {
max-height: 300px;
float: left;
position: relative;
}
.col:after {
content: "";
display: block;
padding-top: 100%;
}
Working Example
Using display: table-cell;
This was one of my personal gotos before using starting to use flexbox. It is fairly easy to work with and had solid browser support in older versions of IE.
Pros:
- Columns are equal height.
- Great support/fallback for ie9
Cons:
- Like the float method above it requires rows so swapping amounts of columns per row can be an issue. Getting space between background colors of the columns can be a pain, requiring you to make wrappers inside of each column and using padding to make space.
The HTML
The HTML is the same as using the :before method.
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
The CSS
The CSS is simple. The .col class is given the display: table-cell property. Then set the width you would like.
.col {
width: 50%;
height: 100%;
display: table-cell;
}
Working Example
Using Flex
Pros:
- Equal height columns
- Can move and reorder content with CSS
- Doesn't require rows to have multiple rows of columns, so if you need to swap from the number of columns you can using css
Cons:
- Requires quite a few prefixes for browser support (Autoprefixer makes this easy)
- If you need to support older versions of IE (9 and below) you will need fallbacks
The HTML
No need for a lot of wrappers/containers. We just need a parent wrapping all the columns.
<div class="grid">
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
The CSS
On the parent container, .grid in this case, we will add display: flex and that it's we have equal height columns.
.grid {
display: flex;
}
There is a downside here if we want to set a width of say fifty percent and we have four columns it will by default ignore that width and fit all four columns into the same row. To fix this we will add flex-wrap: wrap to the .gird and then we can a width to .col and the 3rd and 4th columns would drop to a second row.
.grid {
display: flex;
flex-wrap: wrap;
}
.col {
width: 50%
}
Working Example
For a more complete guide to flex box check out CSS-Tricks
Support
Using Grid
Pros:
- Tons of options for fine tune control of how the layout works. You be broad or define the layout element by element.
- Like Flexbox you can rearrange your content with CSS making coding for different resolutions easier.
Cons:
- Not as solid browser support as Flexbox
The HTML
No need for a lot of wrappers/containers. We just need a parent wrapping all the columns.
<div class="grid">
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
The CSS
This can be as simple of complex as you want it to be. There are options to set base column and row sizes, but you can also get a specific as you want.
.grid {
display: grid;
grid-gap: 20px;
grid-auto-rows: minmax(100px, auto);
grid-template-columns: 50% 1fr;
}
Working Example
For a more complete guide to CSS Grid check out MDN or CSS-Tricks
