CSS column-fill Property

Definition and Usage

The column-fill property controls how content is distributed when an element uses multi-column layout. With balance (the default), the browser tries to make columns roughly equal in height. With auto, columns fill in order—first column first—so later columns can stay shorter or empty.

It applies to multicol elements (for example after you set column-count or columns), is not inherited, and the initial value is balance. The difference is clearest when the container has a fixed height.

CSS Syntax

Use balance or auto in practice. Skip balance-all until browsers implement it.

Property Values

How to Use column-fill

Create a multicol box, give it a height when you want to see auto, then choose balance or sequential fill.

1. Enable columns with column-count, column-width, or columns.
2. Set a block size (for example height: 7em) if you need sequential fill to show clearly—especially in Chrome.
3. Choose column-fill: balance for even columns, or auto to fill top-to-bottom in order.
4. Optional: add column-gap or column-rule so column edges are easier to see.

Live Preview

Same short text, fixed height, three columns. Switch between balance and auto.

CSS Examples

Each snippet keeps only what column-fill needs. Use Try It Yourself for a live editor.

<style>
  p {
    height: 7em;
    columns: 3;
    column-fill: balance;
  }
</style>

<p>
  London. Michaelmas term lately over…
</p>

<style>
  p {
    height: 7em;
    columns: 3;
    column-fill: auto;
  }
</style>

<p>
  London. Michaelmas term lately over…
</p>

<style>
  p {
    height: 7em;
    columns: 3;
    column-rule: 1px solid;
  }
  .balance { column-fill: balance; }
  .auto { column-fill: auto; }
</style>

<p class="balance">Balance: content is spread.</p>
<p class="auto">Auto: columns fill in order.</p>

Key Takeaways