CSS
Create Equal Height Columns and Cards with Flexbox
Easily achieve uniformly sized columns or card elements, ensuring they all share the same height regardless of their content length, using CSS Flexbox.
.flex-row {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next line */
align-items: stretch; /* This is key for equal heights */
gap: 20px; /* Spacing between columns */
padding: 20px;
background-color: #f4f4f4;
}
.flex-column {
flex: 1; /* Allows columns to grow and shrink equally */
min-width: 280px; /* Minimum width before wrapping */
background-color: #fff;
border: 1px solid #ddd;
padding: 15px;
display: flex; /* Optional: If content inside also needs flex layout */
flex-direction: column;
}
.flex-column h3 {
margin-top: 0;
}
.flex-column p {
flex-grow: 1; /* If content inside column needs to push something down */
}
How it works: This snippet demonstrates how to create equal-height columns using Flexbox. By applying `display: flex` and `align-items: stretch` to the parent container, all direct flex children will automatically stretch to the height of the tallest sibling. `flex-wrap: wrap` allows columns to move to the next row on smaller screens, and `flex: 1` along with `min-width` makes them responsive while maintaining equal height.