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

Browser compatibilityUpdate compatibility data on GitHub