As of Spring 2012, the browser prefixes are still needed.
-webkit-column-count:4; -webkit-column-gap:20px; -moz-column-count:4; -moz-column-gap:20px; -o-column-count:4; -o-column-gap:20px; column-count:4; column-gap:20px;
Multiple columns are now available in most browsers (including IE10!), which makes them pretty much ready to use on production websites. You can render the content of any element into multiple columns simply by using column-width:
length unit or column-count:
number. As with paged content, you can use break-before
, break-after
or break-inside
to control how the content displays within each column. You can also make one of the child elements span the whole set of columns by using column-span: all
.
Columns are balanced out with content by default. If you would prefer that columns not be balanced, you can set that by using column-fill: auto
property.
If using a fixed width for the value, then that is the minimum width that it will use. Example:
column-width:9em;
According to a CSS Tricks article, you should specify both a column count AND a column width for best control over the layout. When both properties are specified, then column-count
is the maximum number of columns and column-width
is the minimum width for those columns.