How To Create Equal Height Columns With Flexbox

Ferenc Almasi • 2020 August 10 • 📖 1 min read

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;
    }
}

flex-columns.scss

Copied to clipboard!

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;
}

grid-columns.scss

Copied to clipboard!

And the same can be done using tables as well:

.columns {
    display: table;

    .column {
        display: table-cell;
    }
}

table-columns.scss

Copied to clipboard!

Resource

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us