W3docs
en
Log in

CSS column-fill Property

Use CSS column-fill property to specify whether the columns will be filled in a balanced manner or not. Property Values: balance. Try examples.

The column-fill property defines whether columns are filled evenly or sequentially.

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

When a height is set on a multi-column container, you can control how content flows into the columns. It supports two values: balance and auto. balance is the default and divides content evenly across columns. With auto, content fills columns sequentially until the height constraint is met.

Initial Valuebalance
Applies toMulticol elements.
InheritedNo.
AnimatableNo.
VersionCSS3
DOM Syntaxobject.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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>
Try it Yourself »

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;
        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 fill columns sequentially. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>
Try it Yourself »

Values

ValueDescription
autoSequentially fills the columns.
balanceEqually divides the content between columns. In paged media, only the last page is balanced.
balance-allEqually divides the content between columns. In paged media, all pages are balanced.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

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