Expand All | Collapse All

CSS3 column-fill Property

Topic: CSS3 Properties ReferencePrev|Next


The column-fill CSS property specifies how the column lengths in a multi-column element are affected by the content flow. Contents in a multi-column layout are either balanced, which means that contents in all columns will have the same height or, just take up the room as much as the content needed, when using the value auto.

The following table summarizes the usages context and the version history of this property.

Default value: balance
Applies to: Multi-column elements
Inherited: No
Animatable: No. See animatable properties.
Version: New in CSS3


The syntax of the property is given with:

column-fill auto | balance | initial | inherit

The example below shows the column-fill property in action.

p {
   -moz-column-fill: auto; /* Firefox */
        column-fill: auto; /* Standard syntax */

Property Values

The following table describes the values of this property.

Value Description
auto Columns are filled sequentially such that the columns may differ in length, depending on other column property values.
balance Columns are filled sequentially such that the column heights are as balanced as possible, depending on other column property values.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element column-fill property.

Browser Compatibility

The column-fill property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 13+ -moz-
  • Google Chrome ×
  • Internet Explorer ×
  • Apple Safari ×
  • Opera ×

Further Reading

See tutorial on: CSS3 Multi-column Layouts.

Related properties: column-width, column-gap, column-rule, column-rule-width, column-rule-style, column-rule-color, column-span, column-count, columns.

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties