CSS column-fill Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The column-fill CSS property is used to control how content is distributed across multi-column layouts in a CSS-defined column container. It has two possible values: auto and balance. When set to auto, columns are filled sequentially from top to bottom, and content flows into the next column when the current one is filled. In contrast, when set to balance, the browser attempts to distribute content evenly across all columns, adjusting column heights to minimize the height difference between columns. This property is particularly useful for creating aesthetically pleasing, balanced column layouts in web design, optimizing readability and the overall visual presentation of text-heavy content.

Initial value: balance
Applies to: Multi-column elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.columnFill

Interactive Demo

column-fill: auto;

column-fill: balance;

column-fill: balance-all;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

column-fill: auto | 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

HTML

<div class="book"> 

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 

</div>

CSS

.book { 
   -webkit-columns: 3 200px; 
   -moz-columns: 3 200px; 
   columns: 3 200px; 
   -webkit-column-fill: balance-all; 
   -moz-column-fill: balance-all; 
   column-fill: balance-all; 
}

Result

Editor