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.
Here is a working example:
Example:
.div1{
column-count: 3;
height: 200px;
column-fill: balance;
}
.div2{
column-count: 3;
height: 200px;
column-fill: auto;
}
CSS Syntax of the column-fill Property
The syntax of the column-fill property is as follows:
column-fill: balance|auto|initial|inherit;
Default value of the column-fill Property
The default value of the column-fill property is balance. It specifies that the same content will be distributed among all the columns.
column-fill Property Values
The column-fill property accepts the following values:
| balance | Same content is distributed among all columns. Therefore, all columns have the same height. This is the default value. |
| auto | The columns are filled sequentially. Therefore, some columns may have no content or may be partially filled. Which results in unequal column heights. |
| initial | Sets the column-fill property to its default value(balance). |
| inherit | Inherits the column-fill property from the parent element. |
General Info
| Default Value | balance |
| Inherited | No |
| JavaScript Usage | element.style.columnFill = “auto” |
