CSS
Flexbox for Equal Height Card Layouts
Create a responsive layout where multiple cards or content blocks always maintain equal heights, regardless of their content length, using CSS Flexbox.
.card-container {
display: flex;
flex-wrap: wrap; /* Allow cards to wrap to the next line */
gap: 20px; /* Space between cards */
padding: 20px;
}
.card {
flex: 1 1 calc(33.33% - 20px); /* Approx 3 cards per row with gap */
display: flex; /* Make card itself a flex container */
flex-direction: column; /* Stack content vertically */
border: 1px solid #ddd;
padding: 15px;
box-sizing: border-box; /* Include padding and border in width */
background-color: white;
min-width: 250px; /* Ensure cards don't get too small */
}
.card-content {
flex-grow: 1; /* Allows content area to take up available space */
margin-bottom: 10px; /* Space before footer */
}
.card-footer {
margin-top: auto; /* Pushes the footer to the bottom */
text-align: right;
}
/* Adjust for 2 cards per row on medium screens */
@media (max-width: 992px) {
.card {
flex: 1 1 calc(50% - 20px);
}
}
/* Adjust for 1 card per row on small screens */
@media (max-width: 576px) {
.card {
flex: 1 1 100%;
}
}
How it works: This snippet uses Flexbox to create a responsive card layout where all cards in a row have equal height. The `.card-container` uses `display: flex` and `flex-wrap: wrap`. Each `.card` itself is also a flex container (`flex-direction: column`) which ensures its content (`.card-content`) expands to fill available space (`flex-grow: 1`), and the `.card-footer` is pushed to the bottom using `margin-top: auto`. The `flex: 1 1 calc(...)` property handles responsive sizing for the number of cards per row at different breakpoints.