Web/CSS/column-fill

The column-fill CSS property controls how an element's contents are balanced when broken into columns.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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 ModuleThe definition of 'column-fill' in that specification.	Working Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

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

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.': Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.': Requires a vendor prefix or different name for use.

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.

column-fill by Mozilla Contributors is licensed under CC-BY-SA 2.5.