CSS column-fill Property

The column-fill property controls the element’s content when it is divided into columns. 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.

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

<!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>
  <h2>Column-fill property example</h2>
  <body>
    <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>

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

50.0 + 10+ 12.0 + 52.0
+ 13 -moz-
? ?




Related articles