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 definition

Initial valuebalance
Applies tomulticol elements
Inheritedno
Computed valueas specified
Animation typediscrete

Formal syntax

auto | balance | balance-all

Examples

Splitting text evenly across columns

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.

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
No support 13 — 74
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 Full support 37Safari 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
balance-all
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
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.