How To Create Equal Height Columns With Flexbox

Using flexbox it only takes two rules to create even height columns in CSS, even if your content is different for each of them:

.columns {
    display: flex;

    .column {
        flex: 1;
    }
}

There are also other ways to achieve the same effect. For example, by using grid, again, you need two rules:

.columns {
    display: grid;
    grid-auto-flow: column;
}

And the same can be done using tables as well:

.columns {
    display: table;

    .column {
        display: table-cell;
    }
}

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resource

• flex: 1 in CSS
• grid-auto-flow in CSS