Equal height column card layouts with aligned content using FlexBox and Grid explained with examples

We all have been in this situation where we needed to have a few equal height column card layouts with aligned content inside them. Using FlexBox and Grid in seperate examples I will explain how to make the card layouts and in which use cases they are best suited.

Equal height column markup

Firstly we better clarify which use case is best for these solutions. Both solutions work perfectly on box layouts and their direct children. Meaning there is no good solution if you have nested items inside your layout box. Lets check the markup:

<div class="container">
    <div class="layout-box">
        <h3>Layout Box title</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
        <button>read more</button>
    </div>
    <div class="layout-box">
        <h3>Layout Box title</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
        <button>read more</button>
    </div> 
    <div class="layout-box">
        <h3>Layout Box title</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
        <button>read more</button></div>
    </div> 

Interestingly all the layout boxes have three direct children. H3, p and button. Therefore our code will apply to them. There is no grandchild to affect the layout. We will explain that a bit more later.

FlexBox to make equal height column

Not only we want the columns to be equal height but also we need the button to stick to the bottom of the box so that it looks neat.

I have used grid to make three responsive boxes. But to make the inner alignment flexbox does the job:

.layout-box{   
  display: flex;  
  flex-direction: column;
}
button{  
  margin-top: auto;
} 

We have seen usefulness of auto margin in this post before. That makes the button to stick in the bottom of the card layout.

Grid to make equal height column

Practically the exact same layout but using grid system to accomplish it. Here is the pen I have created for it:

.layout-box{
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Basically using grid-template-rows we are giving all the extra space to the middle section which is the p tag so that the h3 and the button tag will stick to the edges of the layout.Really neat.

Sub-gird is needed

The problem is the height of the inner children. I intentionally made one of the titles longer so that the problem is clear.We can give it a min0height or use a fixed height in grid row but they are not great solutions.

According to Rachel Andrew’s article here, sub-grid will solve the problem where we specify the children as display: subgrid; and they inherit properties from the parent box and can be aligned the same way.

But it is not supported in any browser yet and we will have a complete example once it is officially released later.

Thank you for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.