column-fill

The column-fill CSS property controls how an element's contents are balanced when broken into columns.

Syntax

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

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

The column-fill property is specified as one of the keyword values listed below. The initial value is balance so the content will be balanced across the columns.

Values

auto
Columns are filled sequentially. Content takes up only the room it needs, this may result in some columns remaining empty.
balance
Content is equally divided between columns. In fragmented contexts, such as paged media, only the last fragment is balanced. Therefore in paged media, only the last page would be balanced.
balance-all
Content is equally divided between columns. In fragmented contexts, such as paged media, all fragments are balanced.

Formal syntax

auto | balance | balance-all

Example

HTML

<p class="content-box">
  This is a bunch of text split into multiple
  columns. The CSS `column-fill` property is
  used to spread the contents evenly across
  all the columns.
</p>

CSS

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

Result

Specifications

Specification Status Comment
CSS Multi-column Layout Module
The definition of 'column-fill' in that specification.
Working Draft Initial definition.
Initial valuebalance
Applies tomulticol elements
Inheritedno
Mediavisual, but, in continuous media, has no effect in overflow columns
Computed valueas specified
Animation typediscrete
Canonical orderper grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
column-fillChrome Full support 50Edge Full support 12Firefox Full support 52
Full support 52
Full support 13
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE Full support 10Opera Full support 37Safari Full support 9
Full support 9
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 50Chrome Android Full support 50Firefox Android Full support 52
Full support 52
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android ? Safari iOS Full support 9
Full support 9
Full support 8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 5.0

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Note that there are some interoperability issues and bugs with column-fill across browsers, due to unresolved issues in the specification.

In particular, when using column-fill: auto to fill columns sequentially, Chrome will only consult this property if the multicol container has a size in the block dimension (e.g. height in a horizontal writing mode). Firefox will always consult this property, therefore filling the first column with all of the content in cases where there is no size.