Skip to main content Link Search Menu Expand Document Toggle dark mode Copy Code (external link)

column-fill : Column Fill Property

The column-fill property controls how content is distributed across columns in a multi-column container.

On this page

Usage

selector {
    column-fill: balance | balance-all | auto;
}

Supported Values

Value Description
balance Distributes content equally across all columns, shrinking the container to the minimum height needed.
balance-all Alias for balance — both are treated identically.
auto Fills columns sequentially; earlier columns are fuller and later columns may be shorter or empty.

Supported Elements

The column-fill property can be applied to any block container with an active multi-column layout set via columns, column-count, or column-width.

Notes

  • Has effect only when multi-column layout is enabled on the element.
  • balance and balance-all are equivalent — use whichever reads more clearly.
  • Balanced layout supports inline text, block images, and floated elements within columns.
  • Use auto when preserving source-order column fill is preferred (e.g. a sidebar layout where the first column must be full).
  • Pair with column-gap and column-rule for production-ready columns.

Examples

Example 1: Balanced two-column article

.article {
    columns: 2;
    column-gap: 20pt;
    column-fill: balance;
}

Example 2: Sequential fill

.appendix {
    column-count: 3;
    column-gap: 16pt;
    column-fill: auto;
}

Example 3: Balanced columns with a float

<div style="column-count: 2; column-gap: 10pt; column-fill: balance;">
    <p>Introductory text that flows into the first column...</p>
    <div style="float: left; width: 60pt; height: 40pt; background: #336699;"></div>
    <p>Text that wraps around the float, then continues in the second balanced column.</p>
</div>

Example 4: Data-bound fill mode

<div style="column-count: {{layout.columns}};
            column-gap: {{layout.gap}}pt;
            column-fill: {{layout.fillMode}};">
    <p>{{content}}</p>
</div>