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, this may result 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

Formal syntax

auto | balance | balance-all

Examples

Splitting text evenly across columns

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

Browser compatibility