CSS
Equal Height Columns with Flexbox
Easily achieve equal height columns in your layouts with CSS Flexbox, ensuring consistent visual alignment regardless of content length.
.columns-container {
display: flex;
align-items: stretch; /* This is key for equal heights */
gap: 20px; /* Space between columns */
padding: 20px;
border: 1px solid #e0e0e0;
background-color: #fdfdfd;
border-radius: 10px;
}
.column {
flex: 1; /* Each column takes equal available space */
background-color: #f0f8ff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
font-family: sans-serif;
}
.column.one {
background-color: #e3f2fd;
}
.column.two {
background-color: #fff3e0;
}
.column p:last-child {
margin-bottom: 0;
}
How it works: This CSS snippet demonstrates how to create equal height columns using Flexbox, a common requirement for aesthetically pleasing layouts where content length varies. By setting `display: flex;` on the container and crucially `align-items: stretch;`, all direct children (columns) will automatically stretch to the height of the tallest sibling. Each `.column` has `flex: 1;` which allows it to grow and shrink, taking up an equal portion of the available space. `gap` provides the visual separation between the columns, maintaining a clean design.