Alex Sidorenko

How to make equal height columns with CSS

May 05, 2021

CSS grid layout makes it easier than ever.

HTML

<div class="container">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

CSS

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

Codepen example

Want to get better at modern React?

Subscribe to get one short article delivered to your inbox every week

One article a week. No spam.
Unsubscribe any time