CSS Reference Property

column-fill 2m5c61

The column-fill property specifies how content is distributed and filled into columns in a multi-column layout. 4v1322

Using this property, you can control whether columns should be balanced, or not.

If the columns are not set to be balanced, they are filled sequentially; some columns may end up partially filled, or with no content at all. If they are balanced, the browser (or any other use agent) will do its best so that their heights are as close to equal as possible. It should try to minimize variations in column height, while honoring forced breaks, orphans, and other properties that may affect column heights.

The effect of column-fill is mostly obvious when the height of the multi-column element is specified. The following image shows the difference between a multi-column layout whose columns are not balanced, and one whose columns are balanced using column-fill.

column-fill-values — The difference between balanced and non-balanced columns in a multi-column layout.

Notice how the first two columns are filled and the third one is half-full in the first layout, while they are equal-height in the balanced layout.

Official Syntax 2f2j3w

Syntax:
```
column-fill: auto | balance
```
Initial: balance
Applies To: multi-column elements
Animatable: no

Notes 6p2z1x

A third value balance-all also exists, which relates to paged media. See the Values section below for information.

Values 445h6m

auto: Fill columns sequentially. Equal heights are not a goal or a requirements.
balance: Balance content equally between columns, as far as possible. In paged media, only the last page is balanced.
balance-all: Balance content equally between columns, as far as possible. In paged media, all pages are balanced.

Examples 5w70f

.element {
    /* create multi-column layout in the element */
    column-width: 12em;
    /* increase the gap between columns. See column-gap for more information */
    column-gap: 2em;

    column-fill: balance;
    /* OR */
    column-fill: auto;
}

Live Demo 603y6q

The following demo will show three equal-height columns (currently it’s only ed in Firefox):

View this demo on the Codrops Playground

The following screenshot shows how the result looks in a ing browser:

column-fill

Browser 51c73

The column-fill is currently ed only in Firefox.

Referencia de CSS3 6h4g2c