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.
|Applies to:||Multi-column elements|
|Animatable:||No. See animatable properties.|
|Version:||New in CSS3|
The syntax of the property is given with:
The example below shows the
column-fill property in action.
ExampleTry this code »
column-fill: auto; /* Firefox */
column-fill: auto; /* Standard syntax */
The following table describes the values of this property.
||Columns are filled sequentially such that the columns may differ in length, depending on other column property values.|
||Columns are filled sequentially such that the column heights are as balanced as possible, depending on other column property values.|
||Sets this property to its default value.|
||If specified, the associated element takes the computed value of its parent element
column-fill property is supported in all major modern browsers.
See tutorial on: CSS3 Multi-column Layouts.