CSS Cards With Equal Height

This CSS code snippet helps you to create cards with equal height. It uses the CSS flexbox property to arrange the cards in equal height columns. The card layout comes with an image/thumbnail, a title, and a description. You can integrate these cards for blog posts, products, or portfolio items.

How to Create Cards With Equal Height

1. First of all, load the Google fonts CSS by adding the following CDN link into the head tag of your HTML document. The fonts are optional, you can go without adding them.

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700,700italic'>

2. Create the HTML structure for the cards as follows:

<div class="cards">
  <div class="card">
    <header>
      <h2>Bristol</h2>
    </header>
    
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">
    <div class="body">
    <p>I live in Bristol. It mostly rains, but when it isn't raining we have hot air balloons.</p>
      <p>The balloons sometimes congregate for mass launches, raising the possibility of one landing in your garden.</p>
    </div>
    
  </div>
  
  <div class="card">
    <header>
      <h2>Harbour Cranes</h2>
    </header>
    
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour2.jpg" alt="Bristol harbour">
    <div class="body">
    <p>We also have giant cranes, and historic boats. It is best if the balloons avoid these.</p>
      
    </div>
  </div>
  
  <div class="card">
    <header>
      <h2>Striped Balloon</h2>
    </header>
    
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/coloured-balloon.jpg" alt="Coloured balloon">
    <div class="body">
    <p>I like the nice standard balloons. Stripy. Solid looking basket.</p>
    </div>
  </div>
</div>

3. Finally, style the cards using the following CSS. You can set the custom values for the margin property in order to customize the gap between cards. Similarly, you can set the custom values for background color and fonts.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font: 1em/1.4 Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #fafafa;
}

.cards {
  display: flex;
  margin: 0 -10px;
}

.card {
 margin: 0 10px;
}

img {
  max-width: 100%;
}

.cards {
  margin: 0 auto;
  max-width: 800px;
}

.card {
  background-color: #fff;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

.card header {
  padding: 10px;
  background-color: rgb(41,73,130);
  color: #fff;
}

.card header h2 {
  font-size: 1.4rem;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

.card .body {
  padding: 10px;
  font-size: .9rem;
  color: #757575;
}

That’s all! hopefully, you have successfully created cards with equal height. If you have any questions or suggestions, feel free to comment below.