CSS
Achieve Equal Height Columns or Cards with Flexbox
Easily create rows of cards or columns that maintain consistent, equal heights regardless of content length, a common design challenge elegantly solved by CSS Flexbox for uniform presentation.
.card-container {
display: flex;
flex-wrap: wrap; /* Allows cards to wrap to the next line */
align-items: stretch; /* Makes all direct children stretch to full height */
gap: 20px; /* Spacing between cards */
padding: 20px;
max-width: 960px;
margin: 0 auto;
border: 2px dashed #ccc;
}
.card {
flex: 1 1 calc(33% - 20px); /* Approx 3 cards per row with gap */
min-width: 250px; /* Ensure cards don't get too small */
background-color: #f0f8ff;
border: 1px solid #add8e6;
padding: 15px;
display: flex; /* Internal flex for content alignment */
flex-direction: column;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.card h3 {
margin-top: 0;
}
.card p {
flex-grow: 1; /* Make paragraph grow to push button to bottom */
}
.card button {
margin-top: auto; /* Pushes button to the bottom if content is shorter */
align-self: flex-start; /* Aligns button to start of cross-axis */
padding: 8px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
How it works: This snippet demonstrates a powerful feature of Flexbox: effortlessly creating equal-height columns or cards. By applying `display: flex` and `align-items: stretch` to the parent container, all direct child elements (`.card`) will automatically stretch to the height of the tallest sibling in their row. The `flex-wrap: wrap` property allows the cards to flow onto new lines as needed, creating a responsive grid-like layout. The `flex: 1 1 calc(33% - 20px)` property on the cards handles their sizing and responsiveness, and internal flexbox properties can further align content within each card.