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.
Quick example
.newspaper-section {
column-count: 3;
/* Distributes text evenly across all 3 columns */
column-fill: balance;
}Quick facts
Initial value
balanceInherited
No
Applies to
multi-column elements
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+