CSS
Achieve Equal Height Columns with Flexbox
Learn the simplest way to make columns or sibling elements within a container have the same height using CSS Flexbox, ensuring visual consistency.
.row {
display: flex;
align-items: stretch; /* Default, but explicit for clarity */
gap: 20px;
padding: 20px;
background-color: #f9f9f9;
}
.column {
flex: 1; /* Each column takes equal available space */
padding: 15px;
background-color: #e0e0e0;
border: 1px solid #ccc;
/* Example: varying content to show equal height */
height: auto; /* Ensure height doesn't override flex behavior */
}
.column:nth-child(even) {
min-height: 120px; /* Simulate more content in some columns */
}
How it works: This snippet demonstrates how Flexbox effortlessly creates equal height columns. By setting `display: flex` on the parent `.row`, all child `.column` elements automatically stretch to the height of the tallest sibling, because `align-items` defaults to `stretch`. `flex: 1` ensures each column takes an equal share of the available width.