CssHow-ToBeginner · 3 min read

How to Make Equal Height Columns in CSS: Simple Methods

To make equal height columns in CSS, use display: flex; on the container and set flex: 1; on the columns. Alternatively, CSS Grid with grid-template-columns also creates equal height columns automatically.

📐

Syntax

Use display: flex; on a container to create a flexible layout. Then, apply flex: 1; to child columns to make them grow equally and have the same height.

For CSS Grid, use display: grid; and define columns with grid-template-columns. Grid automatically aligns rows to equal height.

css

/* Flexbox syntax */
.container {
  display: flex;
}
.column {
  flex: 1;
  padding: 1rem;
  border: 1px solid #ccc;
}

/* CSS Grid syntax */
.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.column-grid {
  padding: 1rem;
  border: 1px solid #ccc;
}

💻

Example

This example shows three columns side by side with equal height using Flexbox. Each column's height matches the tallest content automatically.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Equal Height Columns Example</title>
<style>
  .container {
    display: flex;
    gap: 1rem;
  }
  .column {
    flex: 1;
    padding: 1rem;
    border: 2px solid #007BFF;
    background-color: #E9F5FF;
  }
</style>
</head>
<body>
  <div class="container">
    <div class="column">
      <h2>Column 1</h2>
      <p>This column has some short content.</p>
    </div>
    <div class="column">
      <h2>Column 2</h2>
      <p>This column has a bit more content to show how the height adjusts to the tallest column automatically.</p>
      <p>Extra paragraph here.</p>
    </div>
    <div class="column">
      <h2>Column 3</h2>
      <p>Short content again.</p>
    </div>
  </div>
</body>
</html>

Output

Three side-by-side columns with blue borders and light blue backgrounds. All columns have the same height matching the tallest column (Column 2).

⚠️

Common Pitfalls

One common mistake is using float for columns, which does not make their heights equal automatically. Another is forgetting to set flex: 1; on the columns inside a flex container, causing uneven widths and heights.

Also, using height: 100% on columns without a fixed height on the parent won't work because the parent height is not defined.

css

/* Wrong approach with float */
.container-float {
  overflow: hidden;
}
.column-float {
  float: left;
  width: 33%;
  padding: 1rem;
  border: 1px solid #ccc;
}

/* Right approach with flexbox */
.container-flex {
  display: flex;
}
.column-flex {
  flex: 1;
  padding: 1rem;
  border: 1px solid #ccc;
}

📊

Quick Reference

Flexbox: Use display: flex; on container and flex: 1; on columns.
CSS Grid: Use display: grid; with grid-template-columns for equal columns.
Avoid: Using floats or fixed heights for equal height columns.
Remember: Flexbox aligns heights automatically based on tallest column.

✅

Key Takeaways

Use Flexbox with display:flex and flex:1 to create equal height columns easily.

CSS Grid also creates equal height columns automatically with grid-template-columns.

Avoid floats and fixed heights as they do not ensure equal column heights.

Flexbox columns match the tallest column height by default.

Always test your layout in different screen sizes for responsiveness.