column-fill

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

/* Keyword values */
column-fill: auto;
column-fill: balance;
column-fill: balance-all;

/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: revert;
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.

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.

auto | balance | balance-all

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

• Multiple-column Layout
• column-count
• column-width