Equal Height Columns in a Row using Flex Box Image Equal Height Columns in a Row using Flex Box

Table Of Contents

In this tutorial I'll be showcasing how we can achieve equal heights on our columns using the CSS and HTML. More specifically I'll be demonstrating the Flex Box feature of CSS which allows us to create these equal height columns without resorting to a nasty javascript workaround.

Flex CSS

.list {
  display: flex;
  flex-wrap: wrap;
}

.list-item {
  background-color: #eee;
  display: flex;
  color: white;
}
.list-content {
  padding: 1.5em;
}

So how does this work? In our .list class we use display: flex; which initiates flexbox for the outer element. In order for our inner-elements to all have the same height, we have to use display:flex; once again in our .list-item css class.

The Code

See the Pen epOxWM by Elliot Forbes (@emforce) on CodePen.

Elliot Forbes

Elliot Forbes
Twitter: @Elliot_f

Hey, I'm Elliot and I've been working on TutorialEdge for the last 4 years! If you have any tips or suggestions as to how I can make it better, please let me know in the suggestion box below!

Comments Section