Bert Bos | CSS masterclass – Amsterdam 2012
Demo: columns
Two ways to use the columns
property:
columns: 3
columns: 20em
Actual column width may be larger, if the element width is not an exact multiple of the columns
Demo: gap & rule
From the demo:
P.a { column-gap: 3em; column-rule: 1em solid red } P.b { column-gap: 1em; column-rule: 2em solid lightgreen }
The column rule is centered in the gap and doesn't increase the gap!
Demo: fixed height
If the element has a fixed height, columns can be filled in two ways:
column-fill: balance
column-fill: auto
Demo: span
From the demo:
HTML:
<H2>Column-span:none</H2> <P>Lorem ipsum dolor... <P>Nulla sagittis, odi... <H2>Column-span:all</H2> <P>Lorem ipsum dolor... <P>Nulla sagittis, odi...
CSS:
body {columns: 18em} h2 {column-span: all}
Numeric column spans expected in levelĀ 4
H2 {page-break-after: avoid}
(break-after: avoid
is equivalent, but not yet
widely supported)
div { widows: 1; orphans: 1 }
Note that default is 2
column-span
break-*
On other/older browsers, try columnizer (requires JavaScript)