Use flexbox to set equal heights for columns — even when each column has different content inside.
When using the columns element it’s nearly impossible for all the columns to have equal heights, especially when each column has different content inside. You can set a fixed pixel height, but this can cause reflowing issues. Here we’ll cover how create equal height layouts using flexbox.
To recreate the initial layout we start this video with, add a div block onto your page. Add some content inside: a heading, a paragraph, a button. Duplicate the div block twice to have 3 div blocks with content inside. Replace the content if you wish to do so.
As an example, we have three div blocks with content inside already on the page and they each have the same class names and styles. We are going add a container to the page, give it a class, and drop those three div blocks inside.
Once the three div blocks are nested inside the container we can set the container’s display setting to flex.
The default flex settings are set to Direction: Horizontal, Justify: Start, and Align: Stretch which are the exact settings we need for equal height.
Notice, though, that the div’s widths aren’t equal. You can make them equal by setting the div blocks’ width to be 33.33% (you can also do math here like 100/3%, then press enter). Alternatively, you you can set the div blocks’ flex child settings to Expand.
In this example we also want the content in the divs to align with one another. We can do this with flexbox settings too.
Now the button’s margin will automatically adjust resulting in all three buttons aligning together.