CSS column-fill Property

The column-fill property defines whether the columns are filled balanced or not.

The column-fill property is one of the CSS3 properties.

If a height is added to a multi-column element, it will be possible to control how the columns are filled with content. The content can be balanced or filled sequentially. Thus, it has two values: balance and auto. "Balance" is the default value. Content is equally divided between columns. If columns are specified by the "auto" value, the content takes up the room it needs.

Firefox automatically balances the content in a height-constrained multi-column layout while other browsers always fill columns sequentially when given a height constraint.

Initial Value balance
Applies to Multicol elements.
Inherited No.
Animatable No.
Version CSS3
DOM Syntax object.style.columnFill = "balance";

Syntax

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

Example of the column-fill property with the "balance" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .balance {
        column-count: 4;
        column-rule: 1px solid black;
        column-fill: balance;
      }
    </style>
  </head>
  <body>
    <h1>Column-fill property example</h1>
    <p class="balance">
      This is a bunch of text split into multiple columns. The CSS column-fill property is used to spread the contents evenly across all the columns.
    </p>
  </body>
</html>

Result

CSS column-fill Property

Example of the column-fill property with the "auto" value:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .auto {
        column-count: 3;
        column-rule: 1px solid black;
        -webkit-column-fill: auto;
        -moz-column-fill: auto;
        column-fill: auto;
      }
    </style>
  </head>
  <body>
    <h1>Column-fill property example</h1>
    <p class="auto">
      This is a bunch of text split into multiple columns. The CSS column-fill property is used to spread the contents evenly across all the columns. This is a bunch of text split into multiple columns. The CSS column-fill property is used to spread the contents evenly across all the columns.
    </p>
  </body>
</html>

Values

Value Description
auto Sequentially fills the columns.
balance Equally divides the content between columns. In paged media, only the last page is balanced.
balance-all Equally divides the content between columns. In paged media, all pages are balanced.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

chrome edge firefox safari opera
50.0 + 12.0 + 52.0
+ 13 -moz-
9.0+ 37.0+

Practice Your Knowledge

What is the function of the 'column-fill' property in CSS?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?