CSS
Achieve Uniform Height Cards in a Flexbox Layout
Learn how to use CSS Flexbox to ensure all items in a multi-column card layout maintain the same height, even with varying content lengths, creating a clean, consistent UI.
.card-container {
display: flex;
flex-wrap: wrap;
align-items: stretch; /* Crucial for equal height items */
gap: 20px; /* Modern way to add space between items */
}
.card {
flex: 1 1 calc(33.333% - 20px);
/* For 3 columns, adjust as needed. flex-grow, flex-shrink, flex-basis */
display: flex;
flex-direction: column; /* Make card content a flex container */
border: 1px solid #eee;
padding: 15px;
box-sizing: border-box;
}
.card-content {
flex-grow: 1; /* Pushes footer/buttons to bottom */
}
.card-footer {
margin-top: auto; /* Pushes the footer to the bottom of the card */
padding-top: 10px;
border-top: 1px solid #eee;
}
How it works: This snippet demonstrates how to create a grid of cards where each card in a row has the same height, regardless of its content length. The `.card-container` uses `display: flex` and `flex-wrap: wrap` to allow items to flow to new lines. `align-items: stretch` is key here, making all flex items in a row stretch to the height of the tallest item. Each `.card` itself is a flex container with `flex-direction: column`, and its main content area (`.card-content`) uses `flex-grow: 1` to fill available vertical space, effectively pushing elements like a footer (`.card-footer`) to the bottom.