column-fill
column-fill
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 |
| Animation type | discrete |
| 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 | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) |
13.0 (13.0)-moz 52.0 (52.0)[1] | ? | ? | ? |
| Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | (Yes) | 13.0 (13.0)-moz 52.0 (52.0)[1] | ? | ? | ? | (Yes) |
[1] Unprefixed as of Gecko 52, with prefixed aliases still available.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill
