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:


  column-count: 3;
  height: 200px;
  column-fill: balance;
  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:

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
JavaScript Usageelement.style.columnFill = “auto”


  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment