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. The initial value is balance so the content will be balanced across the columns.

Values

auto
Columns are filled sequentially. Content takes up only the room it needs, possibly resulting in some columns remaining empty.
balance
Content is equally divided between columns. In fragmented contexts, such as paged media, only the last fragment is balanced. Therefore in paged media, only the last page would be balanced.
balance-all
Content is equally divided between columns. In fragmented contexts, such as paged media, all fragments are balanced.

Formal definition

Initial value balance
Applies to multicol elements
Inherited no
Computed value as specified
Animation type discrete

Formal syntax

auto | balance | balance-all

Example

Balancing column content

HTML

<p class="fill-auto">
  This paragraph fills columns one at a time. Since all of the text can fit in the first column, the others are empty.
</p>

<p class="fill-balance">
  This paragraph attempts to balance the amount of content in each column.
</p>

CSS

p {
  height: 7em;
  background: #ff9;
  columns: 3;
  column-rule: 1px solid;
}

p.fill-auto {
  column-fill: auto;
}

p.fill-balance {
  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.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
column-fill 50 12 52
52
13 — 74
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
10 37 9
9
8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
balance-all No No No No No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
column-fill 50 50 52
52
14
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
37 9
9
8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
5.0
balance-all No No No No No No

Note that there are some interoperability issues and bugs with column-fill across browsers, due to unresolved issues in the specification.

In particular, when using column-fill: auto to fill columns sequentially, Chrome will only consult this property if the multicol container has a size in the block dimension (e.g., height in a horizontal writing mode). Firefox will always consult this property, therefore filling the first column with all of the content in cases where there is no size.

© 2005–2020 Mozilla 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