column-fill

The column-fill CSS property controls how contents are partitioned into columns. 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

/* Keyword values */
column-fill: auto;
column-fill: balance;

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

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

Browser compatibility