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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support 12Firefox Full support 52
Full support 52
Full support 13
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 52
Full support 52
Full support 14
Prefixed
Prefixed Requires the vendor prefix: -moz-
Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes

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.

Document Tags and Contributors

Last updated by: connorshea,