Equal height columns? Divs that stay the same height?
After reading this post you will have beautiful, responsive divs/columns that always stay the same height as the content grows. How will we achieve this might you ask? Through the awesomeness of Flexbox! Flexbox has 94% global support (and you can provide fallbacks easily, but that is for another post) and it has made it easier to work with divs, columns, create image galleries and complex layouts that are also responsive.
So let’s get to it, how do we use Flexbox to create responsive columns of equal height regardless of how much text/content is in each one?
We will start with some HTML to define our columns. For the purpose of this example let’s create 3 divs as our columns with an image and some text inside. To help us make these look even we will also need to wrap the whole thing in a container div, so let’s add that as well. You will see why we need a container div shortly.
Example structure, amend this as needed.
Some CSS styling
So now we have our markup, let’s give it some basic styling: some background colour so we can see where our columns start and end and let’s make it a 3 column layout by fixing the width as a quick hack for now.
Example CSS, amend this as needed.
Ugly uneven columns
So at this stage we have exactly what you don’t want, 3 ugly uneven columns. So when you only have a tiny bit of content in one it stays shorter than the others. 🚫 I am sure you have already tried fixing the height of the element and I probably don’t have to say that that was a terrible idea and it looks bad anyway.
Flexbox to the rescue
What we really want is to allow the columns to breathe and grow as they need to given the amount of content in them but all stay the same height which is the height of the longest columns. This is where we can use the magic 💫 of Flexbox.
What do you need to know to use Flexbox?
When working with flexbox there is always a parent container that wraps around the elements that you want to align with Flexbox.
This parent element must have it’s display property set to
display: flex. By just setting that property we have almost fixed our problem completely!
You can also set the direction in which you want the items to align, which can be row or column. In this scenario all the columns we have need to sit in one row. So we want all the immediate children of the Flex container to be in one row and therefore we need to set
flex-direction: row but if we also want it to stay fully responsive and the columns to fold over to the next row when there is not enough space we can tell the container to allow wrapping with
Example CSS with Flexbox
For each child of a flex container (these will automatically be the direct children) we also can specify how much each child can grow and shrink given the amount of available space. So in our case we can set
flex: 1; on the
.col and to fully see it’s effect let’s remove everything else we added for this example to be a 3 col layout.