CSS column-fill Property

CSS column-fill property specifies how the content of an element should be distributed among its columns in a multi-column layout.

This property accepts two values, auto and balance. The default value is balance.

When we use column-fill: balance;, the browser distributes the same amount of content in all columns so that all columns can have the same height. The browser does its best to minimize the variations in the height of the columns.

In case of column-fill: auto;, the columns are filled sequentially. This means that at first, the content is filled into the very first column, the remaining content(if any) is filled into the second column, and so on. Therefore, some columns may have no content or maybe filled partially if enough content is not available. See the example below to see how it works:

Example:

.div1{
  column-count: 3;
  height: 200px;
  column-fill: balance;
}
.div2{
  column-count: 3;
  height: 200px;
  column-fill: auto;
}

CSS Syntax

The column-fill property has the following syntax:

column-fill: balance|auto|initial|inherit;

Property Values

The column-fill property accepts the following values:

balanceSame content is distributed among all columns. Therefore, all columns have the same height. This is the default value.
autoThe columns are filled sequentially. Therefore, some columns may have no content or may be partially filled. Which results in unequal column heights.
initialSets the column-fill property to its default value(balance).
inheritInherits the column-fill property from the parent element.

General Info

Default Valuebalance
InheritedNo
JavaScript Usageelement.style.columnFill = “auto”