CSS
Flexbox Equal Height Columns
Achieve perfectly equal height columns in a responsive layout using Flexbox, ensuring consistent visual alignment for various content lengths without fixed heights.
/* CSS */
.container {
display: flex;
gap: 1rem; /* Space between columns */
align-items: stretch; /* Default, but good to be explicit */
}
.column {
flex: 1; /* Each column takes equal available space */
padding: 1rem;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
/* HTML */
<div class="container">
<div class="column">
<h3>Column 1</h3>
<p>Short content.</p>
</div>
<div class="column">
<h3>Column 2</h3>
<p>This column has much longer content to demonstrate how it forces all sibling columns to match its height automatically due to Flexbox properties.</p>
<p>More text here to really make it taller.</p>
</div>
<div class="column">
<h3>Column 3</h3>
<p>Another short content piece.</p>
</div>
</div>
How it works: This snippet demonstrates how to create equal height columns using Flexbox. By setting `display: flex;` on the parent container, its direct children become flex items. The `flex: 1;` property on each `.column` item makes them grow and shrink to occupy equal available space. Crucially, Flexbox items in a row automatically stretch to the height of the tallest item by default (`align-items: stretch;`), ensuring all columns always have the same height regardless of their content length, providing a visually consistent layout.