The column-fill
CSS property controls how an element's contents are balanced when broken into columns.
/* Keyword values */ column-fill: auto; column-fill: balance; column-fill: balance-all; /* Global values */ column-fill: inherit; column-fill: initial; column-fill: unset;
The column-fill
property is specified as one of the keyword values listed below.
auto
balance
balance-all
auto | balance | balance-all
<p class="content-box"> This is a bunch of text split into multiple columns. The CSS `column-fill` property is used to spread the contents evenly across all the columns. </p>
.content-box { column-count: 4; column-rule: 1px solid black; column-fill: balance; }
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-fill' in that specification. | Working Draft | Initial definition. |
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 |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | Yes | 12 | 52
|
? | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | Yes | Yes | Yes | 52
|
? | ? | Yes |
© 2005–2018 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