Layout
column-fill
column-fill sets whether text in a multi-column layout is split so the columns are the same height, or fills the columns one after another.
Syntax
auto | balance | balance-allPreview
Code
.box {
column-count: 2;
font-size: 12px;
column-fill: auto;
}Controls
About
Values
balance: the initial value. Splits the text so each column is as close to the same height as possible.auto: fills the first column to the bottom of the box before moving on to the second. With short text, later columns stay empty.
The preview on this page uses helper declarations to split the sample text into two columns with column-count: 2 and to shrink the text with font-size: 12px so it fits in the height of one column. With auto all the text goes in the first column, and with balance it is split across both.
When auto has an effect
auto fills the columns one after another when the height of the box is set, for example with height. Without a set height, browsers differ: in Chrome, Edge and Firefox the columns have no height limit, so all the text goes in the first column, while Safari splits it as with balance.
- When the text doesn't fit in the box and extra columns are added outside it, both values give the same result.
- When an element spans all columns with
column-span: all, the columns before it are always split to the same height, whatever the value.
Not covered on this page
The spec also has balance-all, which balances the columns on every page when content is split across pages, as in print (balance only balances the last page). No browser supports it yet, so the controls on this page don't offer it.