CSS - 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.
Example
CSS
Copy Code
.content-box { column-count: 4; column-rule: 1px solid black; column-fill: balance; height: 200px; }
Syntax
CSS
Copy Code
/* 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
CSS
Copy Code
auto <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> balance
Description
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 |
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) |
Specifications
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-fill' in that specification. |
Candidate Recommendation | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/column-fill