column-fill

Summary

The column-fill CSS property controls how contents are partitioned into columns. Contents are either balanced, which means that contents in all columns will have the same height or, when using auto, just take up the room the content needs.

初始值	`balance`
适用元素	multicol elements
是否是继承属性	否
适用媒体	`visual`, but, in continuous media, has no effect in overflow columns
计算值	as specified
Animation type	discrete
正规顺序	per grammar

Syntax

Formal syntax: auto | balance | balance-all

column-fill: auto;
column-fill: balance;

/* Global values */
column-fill: inherit;
column-fill: initial;
column-fill: unset;

Values

auto: Is a keyword indicating that columns are filled sequentially.
balance: Is a keyword indicating that content is equally divided between columns.

Examples

.content-box {
  column-count: 4;
  column-rule: 1px solid black;
  column-fill: balance;
  height: 200px;
}

Specifications

Specification	Status	Comment
CSS Multi-column Layout Module column-fill	Working Draft

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	?	13.0 (13.0)-moz	?	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	13.0 (13.0)-moz	?	?	?