column-fill

The column-fill property designates how columns should be filled, balanced or not.

Syntax

Adding a height to a multi-column element allows you to control how the content fills the columns. Content can be balanced or filled sequentially.

div.ex {
  column-fill: auto;
}

Values

balance
Default value. About the same amount of content fills each column, but the columns will not be allowed to be taller than the height.

auto
Each column is filled with content until it reaches the height until it runs out of content. Columns will not necessarily all be filled or filled evenly.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of column-fill? Submit a codepen.io demo and we'll showcase it here ↴