This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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