CSS
CSS Flexbox: Creating Equal Height Columns
Achieve perfectly equal height columns in a multi-column layout using CSS Flexbox, ensuring consistent visual alignment regardless of content length within each column.
.column-container {
display: flex;
align-items: stretch; /* This is the key: makes all flex items stretch to the container's height */
gap: 20px; /* Space between columns */
padding: 20px;
background-color: #f0f0f0;
}
.column {
flex: 1; /* Each column takes an equal share of space */
background-color: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
display: flex; /* Make column content flex to stretch inner content if needed */
flex-direction: column;
}
.column h3 {
margin-top: 0;
color: #333;
}
.column p {
color: #666;
font-size: 0.9em;
}
.column button {
margin-top: auto; /* Pushes button to the bottom if column content is flexed */
padding: 8px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
How it works: This snippet solves the common design challenge of creating equal height columns using CSS Flexbox. By applying `display: flex` to the parent `.column-container` and setting `align-items: stretch`, all direct child `.column` elements are forced to stretch to the height of the tallest column within that row. This ensures visual consistency even when columns have varying amounts of content. Additionally, making `.column` itself a flex container and using `margin-top: auto` on elements like buttons allows them to always stick to the bottom of their respective (now equal-height) columns.