Summary
The column-fill
CSS property controls how contents are partitioned into columns. 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 |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* Keyword values */ column-fill: auto; column-fill: balance; /* Global values */ column-fill: inherit; column-fill: initial; column-fill: unset;
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
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
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Yes) | 13.0 (13.0)-moz | ? | ? | ? |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 13.0 (13.0)-moz | ? | ? | ? | (Yes) |
Document Tags and Contributors
Tags:
Contributors to this page:
Sebastianz,
fscholz,
jpmedley,
jsx,
teoli,
kscarfone,
Sheppy,
ethertank,
FredB,
brianloveswords
Last updated by:
Sebastianz,