column-fill

The column-fill CSS property controls how contents are partitioned into columns.

/* Keyword values */
column-fill: auto;
column-fill: balance;
/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: unset;

Contents are either balanced, which means that contents in all columns will have the same height or, when using auto, just take up the room the content needs.

Initial value	`balance`
Applies to	multicol elements
Inherited	no
Media	`visual`, but, in continuous media, has no effect in overflow columns
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

Syntax

One of the keyword values listed below.

Values

auto: Is a keyword indicating that columns are filled sequentially.
balance: Is a keyword indicating that content is equally divided between columns.

Formal syntax

auto | balance

Examples

.content-box {
  column-count: 4;
  column-rule: 1px solid black;
  column-fill: balance;
  height: 200px;
}

Specifications

Specification	Status	Comment
CSS Multi-column Layout Module The definition of 'column-fill' in that specification.	Candidate Recommendation	Initial definition

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)	(Yes)	13.0 (13.0)-moz 52.0 (52.0)^[1]	?	?	?

Feature	Android	Android Webview	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	?	(Yes)	(Yes)	13.0 (13.0)-moz 52.0 (52.0)^[1]	?	?	?	(Yes)

[1] Unprefixed as of Gecko 52, with prefixed aliases still available.