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

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 my work has helped you in any way, shape, or form then please consider supporting my work.

become a patron Buy Me A Coffee