CSS column-fill Property
Description
The column-fill 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
- Multi-column elements
- Inherited
- No
- Media
- Visual
- Computed value
- As specified
- Animatable
- No
- CSS Version
- CSS3
- JavaScript syntax
- object.style.columnFill
Syntax
Formal syntax: auto | balance column-fill: auto; column-fill: balance;
Values
- autoColumns are filled sequentially such that the columns may differ in length, depending on other column property values.
- balanceBalance content equally between columns, if possible.
Example
body {
column-fill: auto;
}Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| 10 | 12 | 50 | ? | 37 | ? |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| 50 | 50 | ? | ? | ? | 5.0 |