CSS column-fill Property

Description

The column-fill property controls how content is distributed among the columns of a multi-column container. It determines whether the user agent should try to even out the heights of all columns or allow columns to be filled sequentially, which has a direct effect on where column breaks occur and how content flows when there is more content than available vertical space. This property is therefore central to the visual rhythm of multi-column text and the placement of partial elements near column boundaries.

In practical layout work, column-fill is used together with layout-defining properties to achieve the desired column behavior. For example, when you define a multi-column layout via columns or by specifying column-width and the column-gap, the column-fill policy decides whether short blocks will be redistributed to balance column heights or whether the first column should be filled before any content flows into the next. That choice matters especially when the container has a constrained height - it changes whether extra content results in additional columns, visual imbalance, or overflow handling.

Column filling also interacts with fragmentation and break behavior: it can influence how and where elements are split across columns and pages, so you should consider it alongside rules that manage breaks such as break-inside or when elements span multiple columns via column-span. Because the filling strategy affects whether content is forced to overflow or be truncated in a constrained box, coordinate its use with container sizing and overflow strategies, for example by considering the container’s height and the overflow behavior to avoid unexpected scrollbars or clipped content.

Definition

Initial value: balance
Applies to: Multi-column elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.columnFill

Interactive Demo

column-fill: auto;

column-fill: balance;

column-fill: balance-all;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

column-fill: auto | balance

Values

autoColumns are filled sequentially such that the columns may differ in length, depending on other column property values.
balanceBalance content equally between columns, if possible.

Example

HTML

<div class="examples">

    <div class="column-box auto">

        <h3>column-fill: auto</h3>

        <div class="column-content">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>

            <p>Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl.</p>

            <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere neque metus vitae est.</p>

            <p>Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam.</p>

            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui.</p>

            <p>Nulla facilisi. Donec id justo. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>

        </div>

    </div>



    <div class="column-box balance">

        <h3>column-fill: balance</h3>

        <div class="column-content">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>

            <p>Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl.</p>

            <p>Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere neque metus vitae est.</p>

            <p>Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam.</p>

            <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui.</p>

            <p>Nulla facilisi. Donec id justo. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>

        </div>

    </div>

</div>

CSS

/* Layout */
body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background: #f5f6f7;
    padding: 28px;
}

.examples {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.column-box {
    width: 360px;
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    padding: 14px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

.column-box h3 {
    margin: 0 0 10px 0;
    font-size: 15px;
    line-height: 1.2;
    color: #111827;
}

/* Column content common settings */
.column-content {
    column-count: 3;
    column-gap: 16px;
    height: 170px; /* fixed height to show the difference between auto and balance */
    overflow: auto;
}

.column-content p {
    margin: 0 0 12px 0;
    font-size: 13px;
    line-height: 1.45;
    color: #374151;
}

/* Demonstrate both values of column-fill */
.column-box.auto .column-content {
    column-fill: auto;
}

.column-box.balance .column-content {
    column-fill: balance;
}

/* Prevent headings or other elements from being split across columns if inserted */
.column-content > * {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS column-fill property. Hover over a browser icon to see the version that first introduced support for this CSS property.