`Column-fill` - CSS Property

column-fill

Summary of characteristics of the `column-fill` property

Quick description

Manages the distribution of content across columns.

Status

Standard

Predefined values

balance | auto | balance-all

Percentages

Not applicable.

Initial value

balance

Inherited by default

No.

Animation type

Discrète: during an animation, the column-fill property passes from one value to another without transition.

Canonical order

Single: single value (no order).

W3C Module

CSS Multi-column Layout Module

References (W3C)

🡇

🡅

CSS Multi-column Layout Module Level 2

Document status: WD (Working Draft)

CSS Multi-column Layout Module Level 1

Document status: CR (Candidate Recommendation)

Syntax diagram of `column-fill`.

Syntax diagram of the column-fill property.
The links in the diagram provide more details about the values.
Download the diagram in SVG.

Description of the `column-fill` property.

column-fill defines how the content will be distributed between the columns. The first option is to move to the next column when the current one is full, so the last column can end up shorter than the others. The second option is to balance the height of each column as evenly as possible.

Other constraints can affect the height of columns. These include forced column breaks using the break-before and break-after properties.
The widows and orphans properties, which prevent lines of text from being left alone at the top or bottom of a column, also influence the size of columns.

Values for `column-fill`.

column-fill: balance;

Default value. The browser distributes the content as evenly as possible between the columns.

The properties widows and orphans can cause a slight shift in column length.

Using a multi-column layout makes sense when the characters are small and/or when a single column would be too wide. The reader's eye can have trouble following the text from one end of the line to the other, which makes reading tougher.

column-fill:balance;
column-fill: auto;

The browser fills the columns one after the other, moving to a new column when the current one is full. This assumes that the column height is fixed (height).
The filling of the columns will be uneven, and the last columns might even be empty.

Using a multi-column layout makes sense when the characters are small and/or when a single column would be too wide. The reader's eye can have trouble following the text from one end of the line to the other, which makes reading tougher.

column-fill:auto;
column-fill: balance-all; ⚠

The browser distributes the content as evenly as possible between the columns. The difference from the previous value only appears in a fragmented output, like a printout (page fragmentation).

Using a multi-column layout makes sense when the characters are small and/or when a single column would be too wide. The reader's eye can have trouble following the text from one end of the line to the other, which makes reading tougher.

column-fill:balance-all;
column-fill: initial; (balance) column-fill: inherit; column-fill: revert; column-fill: revert-layer; column-fill: revert-rule; column-fill: unset;

Common values are presented on these pages: initial, inherit, revert, revert-layer, revert-rule, unset.

Animation of the `column-fill` property.

Animating the column-fill property is possible but of limited interest. Also, this might generate quite heavy calculations.

The distribution of content between these two columns (balance) is managed by the property column-fill. For demonstration purposes, it has been animated. To avoid interfering with the column balancing, the properties orphans and widows were set to their minimum value, which is 1.
You can check out the animation CSS, as well as the rules applied to this element, by clicking the button above.

Examples with the `column-fill` property.

The height of the demo block has been set. The simulator only changes the property column-fill.

column-fill :

balance

auto

balance-all

Excerpt from the book by Daniel Glazman - "CSS2, Style Sheets for the Web," December 1998: "Netscape considerably delayed the development of style sheets on the web by releasing its proprietary HTML extensions in 1996; they offered management of color, fonts, and even blinking (...) Netscape promoted simplicity: HTML document authors were comfortable with this format because it was simple; so it was enough to add new simple HTML elements to documents to handle presentation."

Browsers compatibility with `column-fill`.

The column-fill property is well recognized by browsers. The first column of the table below shows general support for multi-column layouts. There are still some incompatibilities, but they don't concern the column-fill property.

Column 1

Support for column layouts, including handling column breaks.

Column 2

Support for the property column-fill to define when to move to the next column.

Notes:

(1) Does not support the values avoid (in the column context), avoid-column, and avoid-page for the properties break-after, break-before, and break-inside.

Multiple column
layout

column-fill
property

Estimated overall support.

18%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Chrome

Edge

Firefox

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `column-fill` property.