How can you make all cards in a grid layout have equal height?
•21 min read
Here are the best working methods with code.
✅ Method 1: Using CSS Grid (Best & Easiest)
CSS Grid automatically equalizes height when you use align-stretch.
HTML
<div class="grid">
<div class="card">Card 1 content...</div>
<div class="card">Card 2 has more content...</div>
<div class="card">Card 3...</div>
</div>
CSS
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card {
background: #f2f2f2;
padding: 20px;
border-radius: 8px;
height: 100%;
}
➡️ All cards will automatically stretch to equal height.
✅ Method 2: Using Flexbox (Very Common)
Flexbox makes all children equal height when using align-stretch.
HTML
<div class="card-container">
<div class="card">Short text</div>
<div class="card">This card has slightly more text inside.</div>
<div class="card">Short text again</div>
</div>
CSS
.card-container {
display: flex;
gap: 20px;
}
.card {
background: #eee;
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
➡️ Flexbox ensures all cards have the same height.
✅ Method 3: Using Flexbox + Grid Combination (Responsive)
HTML
<div class="grid">
<div class="card">
<h3>Title</h3>
<p>Short text.</p>
</div>
<div class="card">
<h3>Title</h3>
<p>Long content here... Lorem ipsum dolor sit amet.</p>
</div>
<div class="card">
<h3>Title</h3>
<p>Medium text.</p>
</div>
</div>
CSS
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card {
background: #fafafa;
padding: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
height: 100%;
}
✅ Method 4: Bootstrap (Ready-Made)
Bootstrap provides a class h-100.
Bootstrap HTML
<div class="row">
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">Card 1</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">Card 2 more content...</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">Card 3</div>
</div>
</div>
</div>
➡️ Bootstrap’s h-100 ensures equal height cards.
🎯 Conclusion
To make all cards equal height:
| Method | Works Best For |
|---|---|
| CSS Grid | Modern layouts, simplest |
| Flexbox | Horizontal equal-height rows |
| Grid + Flexbox | Responsive websites |
| Bootstrap | Ready-made UI framework |
