The column-fill
CSS property controls how contents are partitioned into columns.
/* Keyword values */ column-fill: auto; column-fill: balance; /* Global values */ column-fill: inherit; column-fill: initial; column-fill: unset;
Contents are either balanced, which means that contents in all columns will have the same height or, when using auto
, just take up the room the content needs.
Initial value | balance |
---|---|
Applies to | multicol elements |
Inherited | no |
Media | visual , but, in continuous media, has no effect in overflow columns |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
Syntax
One of the keyword values listed below.
Values
auto
- Is a keyword indicating that columns are filled sequentially.
balance
- Is a keyword indicating that content is equally divided between columns.
Formal syntax
auto | balance | balance-all
Examples
.content-box { column-count: 4; column-rule: 1px solid black; column-fill: balance; height: 200px; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-fill' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | Yes | Yes | 52 13 -moz- | ? | ? | ? |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes | Yes | Yes | 52 14 -moz- | ? | ? | ? |
Document Tags and Contributors
Tags:
Contributors to this page:
ddbeck,
mfluehr,
wbamberg,
chrisdavidmills,
erikadoyle,
Sebastianz,
fscholz,
jpmedley,
jsx,
teoli,
kscarfone,
Sheppy,
ethertank,
FredB,
brianloveswords
Last updated by:
ddbeck,