The column-fill CSS property controls how contents are partitioned into columns.

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

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

Contents are either balanced, which means that contents in all columns will have the same height or, when using auto, just take up the room the content needs.

Initial valuebalance
Applies tomulticol elements
Mediavisual, but, in continuous media, has no effect in overflow columns
Computed valueas specified
Animation typediscrete
Canonical orderper grammar


One of the keyword values listed below.


Is a keyword indicating that columns are filled sequentially.
Is a keyword indicating that content is equally divided between columns.

Formal syntax

auto | balance | balance-all


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


Specification Status Comment
CSS Multi-column Layout Module
The definition of 'column-fill' in that specification.
Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes) (Yes) 13.0 (13.0)-moz
52.0 (52.0)[1]
? ? ?
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Yes) (Yes) 13.0 (13.0)-moz
52.0 (52.0)[1]
? ? ? (Yes)

[1] Unprefixed as of Gecko 52, with prefixed aliases still available.

Document Tags and Contributors

 Last updated by: mfluehr,