column-fill property CSS Reference

Definition and Usage

The column-fill CSS property controls how contents are partitioned into columns. 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 balance
  • Applies to multicol elements
  • Inherited no
  • Media visual, but, in continuous media, has no effect in overflow columns
  • Computed Value as specified
  • Animatable no
  • Canonical order the unique non-ambiguous order defined by the formal grammar


Formal syntax: auto | balance
column-fill: auto
column-fill: balance
column-fill: inherit


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


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


Desktop browsers

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic supportNA13.0 (13.0)-mozNANANA

Mobile browsers

FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic supportNA13.0 (13.0)-mozNANANA

Relative articles