CSS3 column-fill Property
Topic: CSS3 Properties ReferencePrev|Next
Description
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 |
Syntax
The syntax of the property is given with:
The example below shows the column-fill property in action.
Example
Try this code »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.
 |
Basic Support—
|
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.
