CSS column-fill Property

What You’ll Learn

The column-fill property controls how content spreads across columns — evenly balanced or filled one column at a time.

Definition and Usage

The column-fill CSS property controls how content is distributed across columns in a multi-column layout. It determines whether columns are balanced so they are approximately equal in height, or filled sequentially one after another.

This property is particularly useful when creating multi-column layouts and you want to control whether content spreads evenly or stacks into the first columns first.

📝 Syntax

Apply column-fill to any element that uses multi-column layout:

selector {
  column-fill: balance | auto;
}

Basic Example

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

Syntax Rules

• The initial value is balance.
• Values: balance (even distribution) or auto (sequential fill).
• Requires a multi-column context — use with column-count or column-width.
• Most noticeable when the container has a defined height.
• Does not change the number of columns — only how content fills them.

💎 Property Values

The column-fill property accepts two keyword values.

balance vs auto

Examples Gallery

Compare balance and auto side by side, then try each value on its own with fixed-height column layouts.

<style>
  .columns {
    column-count: 3;
    column-gap: 20px;
    height: 200px;
  }
  .balance { column-fill: balance; }
  .auto { column-fill: auto; }
</style>

<div class="columns balance">...</div>
<div class="columns auto">...</div>

<style>
  .balanced {
    column-count: 3;
    column-gap: 1.5rem;
    column-fill: balance;
    height: 180px;
  }
</style>

<div class="balanced">...</div>

<style>
  .sequential {
    column-count: 3;
    column-fill: auto;
    height: 180px;
  }
</style>

<div class="sequential">...</div>

.article-box {
  column-count: 2;
  column-gap: 2rem;
  column-rule: 1px solid #e2e8f0;
  column-fill: balance;
  height: 160px;
  padding: 1rem;
}

💡 Best Practices