column-fill
Controls how content is distributed across columns. 'Balance' tries to make all columns equal in height, while 'auto' fills them one after another until they reach their height limit.
Usage example
.newspaper-section {
column-count: 3;
/* Distributes text evenly across all 3 columns */
column-fill: balance;
}Initial value
balance
Inherited
No
Applies to
multicolElements
Animation type
discrete
Values
autobalance column-fill Browser Support
Widely available Since 2017 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2017.
Safe to use without fallbacks.
50+
52+
9+
12+