CSS column-fill attribute

Definition and usage

The column-fill attribute specifies how to fill the columns (whether to coordinate).

See also:

CSS3 Tutorial:CSS3 Multicol

HTML DOM Reference Manual:columnFill attribute

Example

Define how to fill the columns:

div
{
column-fill:auto;
}

CSS syntax

column-fill: balance|auto;

Attribute value

Value Description
balance Coordinate the columns. Browsers should minimize the difference in column lengths.
auto Fill columns in order, with different lengths for each column.

Technical details

Default value: balance
Inheritance: no
Version: CSS3
JavaScript syntax: object.style.columnFill="auto"

More examples

Column-count
Divide the text in the div element into three columns.
Column-gap
Divide the text in the div element into three columns, and specify a 30-pixel gap between columns.
Column-rule
Define the width, style, and color between columns.

Browser support

Chrome IE / Edge Firefox Safari Opera
50.0 10.0 52.0 10.0 37.0