column-fill

Summary

Specifies how to fill columns (balanced or sequential).

Overview table

Initial value

balance

Applies to

multi-column elements

Inherited

No

Media

visual

Computed value

As specified

Animatable

No

CSS Object Model Property
:

Syntax

• column-fill: auto
• column-fill: balance

Values

balance

Columns are filled sequentially such that the column heights are balanced as equally as possible, depending on other column property values.

auto

Columns are filled sequentially such that the columns may differ in length, depending on other column property values.

Examples

/*
Make as many 15em columns as possible
but restrict the heights of the columns to 400px
with column-fill: balance;
*/

#columns {
  /* Prefix free example below, use vendor prefixes where needed */
  column-width: 15em;
  column-fill: balance;
  height: 400px;
}

View live example

Notes

In continuous media, this property will only be consulted if the length of columns has been constrained. Otherwise, columns will automatically be balanced.

In continous media, this property does not have any effect in overflow columns; in paged media, this property will only have effect on the last page the multicol element appears on.

Column balancing is also dependent on the values of orphans and widows, if set.

Related specifications

CSS Multi-column Layout Module

W3C Candidate Recommendation

Attributions

• Microsoft Developer Network: Article