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.

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:

General Info