W3cubDocs

/CSS

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.

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 value balance
Applies to multicol elements
Inherited no
Media visual, but, in continuous media, has no effect in overflow columns
Computed value as specified
Animation type discrete
Canonical order per grammar

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support Yes 12 52
52
13
Prefixed
Prefixed Requires the vendor prefix: -moz-
? ? ?
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes Yes Yes 52
52
14
Prefixed
Prefixed Requires the vendor prefix: -moz-
? ? Yes

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill