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.

Values

auto
Columns are filled sequentially. Content takes up only the room it needs.
balance
Content is equally divided between columns. In paged media, only the last page is balanced.
balance-all
Content is equally divided between columns. In paged media, all pages 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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes12

52

13 -moz-

? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes Yes

52

14 -moz-

? ? Yes

Document Tags and Contributors

Last updated by: wbamberg,