Equal Height Columns

📖 Complete Guide Available: This technique is covered in detail in our comprehensive CSS Layout and Responsive Design Guide with advanced examples and responsive patterns.

Create equal height columns using modern CSS layout methods. Flexbox and CSS Grid make this layout challenge simple and reliable.

#Flexbox Solution (Recommended)

The easiest way to create equal height columns:

.container {
    display: flex;
    gap: 2rem;
}

.column {
    flex: 1;
    padding: 1rem;
    background: #f5f5f5;
}

<div class="container">
    <div class="column">
        <h3>Column 1</h3>
        <p>Short content</p>
    </div>
    <div class="column">
        <h3>Column 2</h3>
        <p>
            Much longer content that spans multiple lines and makes this column
            taller than the others.
        </p>
    </div>
    <div class="column">
        <h3>Column 3</h3>
        <p>Medium length content</p>
    </div>
</div>

#CSS Grid Alternative

For more complex layouts:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.grid-column {
    padding: 1rem;
    background: #f5f5f5;
}

#Responsive Equal Heights

Make columns stack on mobile while maintaining equal heights on desktop:

.responsive-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .responsive-container {
        flex-direction: row;
    }
}

.responsive-column {
    flex: 1;
    padding: 1rem;
    background: #f5f5f5;
}

That's it! No JavaScript, no complex positioning, no table hacks. Flexbox automatically makes all columns the same height as the tallest one.