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.
It is documented as part of the CSS Multi-column Layout specification.
Syntax
/* Usage Example */
.newspaper-section {
column-count: 3;
/* Distributes text evenly across all 3 columns */
column-fill: balance;
}
/* Syntax */
column-fill: auto;
column-fill: balance;
/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: revert;
column-fill: revert-layer;
column-fill: unset;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.
50+
52+
9+
12+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more