🧱 CSS column-fill — Complete Tutorial

🌐 What Is column-fill?

The column-fill property controls **how content is distributed** across columns in a CSS Multi-Column Layout. By default, browsers try to balance content evenly across columns, but column-fill lets you change that behavior.

>>“Use column-fill when you want to control whether columns are balanced or filled sequentially.”

Note

✔ Works only with CSS multi-column layouts
✔ Controls column behavior for paged or multi-column content
✔ auto and balance are the primary values

📦 Syntax

column-fill syntax

column-fill: auto | balance;
ValueDescription
balanceDefault (except for paged media). Browser tries to distribute content evenly across all columns.
autoFills columns sequentially (one column after another). The last column may be shorter.

📌 1. Basic Example — Balanced Columns (Default)

Balanced columns

.content {
  column-count: 3;
  column-fill: balance; /* default */
}

Content is evenly distributed across all 3 columns.

📌 2. column-fill: auto — Fill One Column at a Time

Sequential fill

.content {
  column-count: 3;
  column-fill: auto;
}

Content flows into column 1, then column 2, then column 3 — creating unbalanced columns.

Note

auto is especially useful for paginated documents or print layouts.

📌 3. Combining Column Fill With Column Height

Fixed height container

.container {
  height: 300px;
  column-count: 3;
  column-fill: auto;
  overflow: auto;
}

A fixed-height box with sequential columns can create scrollable newspaper-style blocks.

📌 4. Multi-Column Cards (Manual Fill Strategy)

Card collection

.cards {
  column-count: 4;
  column-fill: auto;
  column-gap: 20px;
}

.card {
  break-inside: avoid;
}

Avoids splitting cards and makes a waterfall-like layout using column auto-fill.

📌 5. Balanced vs Auto — Visual Example

✔ Balanced

Balanced example

.balanced {
  column-count: 3;
  column-fill: balance;
}

✔ Auto

Auto example

.auto {
  column-count: 3;
  column-fill: auto;
}

Balanced mode tries to make all columns equal height. Auto mode fills one completely before moving to the next.

📌 6. Using With column-width

column-width + column-fill

.text {
  column-width: 200px;
  column-fill: auto;
}

When using column-width, the browser chooses how many columns fit based on container size, then column-fill determines how to fill them.

📌 7. Print Media Use Case

Paged content

@media print {
  .chapter {
    column-count: 2;
    column-fill: auto;
  }
}

print mode uses auto behavior naturally because pages must fill from top to bottom sequentially.

🧪 Real-World Examples

1️⃣ Magazine-Style Layout

Magazine content

.magazine {
  column-count: 3;
  column-gap: 40px;
  column-fill: balance;
}

2️⃣ Style a Recipe Book (Print)

Recipe columns

@media print {
  .recipe {
    column-count: 2;
    column-fill: auto;
  }
}

3️⃣ Multi-Column Sidebar

Sidebar

.sidebar {
  column-count: 2;
  column-fill: balance;
  column-rule: 2px solid #eee;
}

⚠️ Common Mistakes

  • ❌ Expecting column-fill to control column height directly
  • ❌ Forgetting that balance is default in screen layouts
  • ❌ Using auto in responsive layouts without overflow handling
  • ❌ Thinking multi-columns behave like CSS Grid (they don’t)

Note

Multi-column layout is meant for text flow — use Grid if you need strict alignment and row/column control.

🔥 Summary

The column-fill property determines how content flows into the columns of a multi-column layout. Use balance when you want evenly sized columns, and auto when you want sequential filling (common in printing and paginated content).

>>“Column fill decides whether your layout feels like a magazine or a book.”

Learn more →MDN Docs 📘