Columns

Back to the index.

CSS3 multicolumn specification.

This module serves to split up an element into multiple columns, and to give further instructions about a few details.

This is the mobile table. See also the desktop table.

All WebKit-based browsers need the -webkit- prefix. All Gecko-based browsers need -moz-. So use those prefixes.

I'm writing a CSS book.

[an error occurred while processing this directive] [an error occurred while processing this directive]
break-before: column
Making sure a column breaks occurs just before or after an element 		wk No wk wk Yes wk wk No wk No wk No 
-webkit-column-break-before: always;
break-before: column;

Note the different keywords in the standards-based an the WebKit syntax. Use after instead of before if you need it.

wk
Uses WebKit syntax
break-inside: avoid (columns)
Avoid column breaks within an element

Secondary test page: my CSS main page, where I use columns for the index. Individual entries should not be broken over two columns. 		A+B No A+B Yes No A+B No A+B A+B No No 
-webkit-column-break-inside: avoid;
break-inside: avoid;
Alternative
Uses WebKit syntax
Buggy
Most WebKit-based browsers now break the paragraph at the last line instead of two lines earlier. Although this is allowed according to the spec (you should try to avoid breaks), I don’t see the point here, since the new effect is worse than the original.
A+B
Alternative and buggy.

Last major update on 17 February 2013.

[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]
break-before: column
Making sure a column breaks occurs just before or after an element 		Alternative No Alternative Yes Alternative No Alternative Alternative No Alternative No 
-webkit-column-break-before: always;
break-before: column;

Note the different keywords in the standards-based an the WebKit syntax. Use after instead of before if you need it.

Alternative
Uses WebKit syntax
break-inside: avoid (columns)
Avoid column breaks within an element

Secondary test page: my CSS main page, where I use columns for the index. Individual entries should not be broken over two columns. 		A+B No A+B Yes No A+B No A+B No A+B No No 
-webkit-column-break-inside: avoid;
break-inside: avoid;
Alternative
Uses WebKit syntax
Buggy
Most WebKit-based browsers now break the paragraph at the last line instead of two lines earlier. Although this is allowed according to the spec (you should try to avoid breaks), I don’t see the point here, since the new effect is worse than the original.
A+B
Alternative and buggy.
column-count
 Yes Yes Yes Yes No Yes Yes No -moz- 
-prefix-column-count: 4;
column-fill
 No No Yes No No No No No 
column-fill: auto;

By default, columns should be balanced if the height is too large (balance keyword). The auto keyword tells the browser to fill the height entirely and leave gaps at the end of the last column, if necessary.
column-gap
 Yes Yes Yes Yes No Yes Yes No 
-prefix-column-gap: 5em;
column-rule
 Yes Yes Yes Yes No Yes No Yes Yes No Yes 
-prefix-column-rule: 5px double red;
column-span
 Yes No No Yes Sometimes No Yes Yes No No Yes No Yes No 
-prefix-column-span: all;
  • The Samsung Android 4 supports it; the HTC does not.

This is the most insane compatibility pattern I’ve ever seen. I hoped that support could be tied to specific WebKit versions, but it can’t. 535+ never support it, but 534 most of the time (HTC Android 4, Dolphin and One do not support it, rest does), and 533 doesn’t most of the time (UC does).

I have no fucking clue what’s going on.
column-width
 Yes Yes Yes Yes No Yes Yes No -moz- 
-prefix-column-width: 10em;

Tested browsers

[an error occurred while processing this directive]