Bert Bos &
Eva Kasal | CSS3 in Style
en fr
Multi-column
●
●
●
●
●
●
Two ways to use the columns property:
- Set the number of columns:
columns: 3
- Set the width of columns:
columns: 20em
Actual column width may be larger, if the element width is not
an exact multiple of the columns
Multi-column – 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!
Multi-column – unbalanced
●
●
●
●
●
●
If the element has a fixed height, columns can be
filled in two ways:
column-fill: balance
fill all columns equally
column-fill: auto
fill columns sequentially
Multi-column – 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
Multi-column – breaks, widows & orphans
●
●
●
●
●
●
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
Multi-column – status
●
●
●
●
●
●
- Opera ≥ 11 – small bugs
- AHFormatter 5 – (not tested)
- Prince 8 – no
column-span
- IE 10 Preview – (not tested)
- Webkit, Gecko – experimental, no
break-*
- PDFreactor 5 – experimental
On other/older browsers, try columnizer (requires JavaScript)