CSS3 Multiple column layout
CSS3 Multiple column layout
Method of flowing information in multiple columns
| Spec | http://www.w3.org/TR/css3-multicol/ |
|---|---|
| Status | W3C Candidate Recommendation |
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 57 (1) | 62 (1) | ||||
| 56 (1) | 61 (1) | TP (1) | 48 (1) | ||
| 16 | 55 (1) | 60 (1) | 11 (1) | 47 (1) | |
| 11 | 15 | 54 (1) | 59 (1) | 10.1 (1) | 46 (1) |
| 10 | 14 | 53 (1) | 58 (1) | 10 (1) | 45 (1) |
| 9 | 13 | 52 (1) | 57 (1) | 9.1 (1) | 44 (1) |
| 8 | 12 | 51 (1,*) | 56 (1) | 9 (1) | 43 (1) |
| Show all | |||||
| 7 | 50 (1,*) | 55 (1) | 8 (1,*) | 42 (1) | |
| 6 | 49 (1,*) | 54 (1) | 7.1 (1,*) | 41 (1) | |
| 5.5 | 48 (1,*) | 53 (1) | 7 (1,*) | 40 (1) | |
| 47 (1,*) | 52 (1) | 6.1 (1,2,*) | 39 (1) | ||
| 46 (1,*) | 51 (1) | 6 (1,2,*) | 38 (1) | ||
| 45 (1,*) | 50 (1) | 5.1 (1,2,*) | 37 (1) | ||
| 44 (1,*) | 49 (1,2,*) | 5 (1,2,*) | 36 (1,2,*) | ||
| 43 (1,*) | 48 (1,2,*) | 4 (1,2,*) | 35 (1,2,*) | ||
| 42 (1,*) | 47 (1,2,*) | 3.2 (1,2,*) | 34 (1,2,*) | ||
| 41 (1,*) | 46 (1,2,*) | 3.1 (1,2,*) | 33 (1,2,*) | ||
| 40 (1,*) | 45 (1,2,*) | 32 (1,2,*) | |||
| 39 (1,*) | 44 (1,2,*) | 31 (1,2,*) | |||
| 38 (1,*) | 43 (1,2,*) | 30 (1,2,*) | |||
| 37 (1,*) | 42 (1,2,*) | 29 (1,2,*) | |||
| 36 (1,*) | 41 (1,2,*) | 28 (1,2,*) | |||
| 35 (1,*) | 40 (1,2,*) | 27 (1,2,*) | |||
| 34 (1,*) | 39 (1,2,*) | 26 (1,2,*) | |||
| 33 (1,*) | 38 (1,2,*) | 25 (1,2,*) | |||
| 32 (1,*) | 37 (1,2,*) | 24 (1,2,*) | |||
| 31 (1,*) | 36 (1,2,*) | 23 (1,2,*) | |||
| 30 (1,*) | 35 (1,2,*) | 22 (1,2,*) | |||
| 29 (1,*) | 34 (1,2,*) | 21 (1,2,*) | |||
| 28 (1,*) | 33 (1,2,*) | 20 (1,2,*) | |||
| 27 (1,*) | 32 (1,2,*) | 19 (1,2,*) | |||
| 26 (1,*) | 31 (1,2,*) | 18 (1,2,*) | |||
| 25 (1,*) | 30 (1,2,*) | 17 (1,2,*) | |||
| 24 (1,*) | 29 (1,2,*) | 16 (1,2,*) | |||
| 23 (1,*) | 28 (1,2,*) | 15 (1,2,*) | |||
| 22 (1,*) | 27 (1,2,*) | 12.1 | |||
| 21 (1,*) | 26 (1,2,*) | 12 | |||
| 20 (1,*) | 25 (1,2,*) | 11.6 | |||
| 19 (1,*) | 24 (1,2,*) | 11.5 | |||
| 18 (1,*) | 23 (1,2,*) | 11.1 | |||
| 17 (1,*) | 22 (1,2,*) | 11 | |||
| 16 (1,*) | 21 (1,2,*) | 10.6 | |||
| 15 (1,*) | 20 (1,2,*) | 10.5 | |||
| 14 (1,*) | 19 (1,2,*) | 10.0-10.1 | |||
| 13 (1,*) | 18 (1,2,*) | 9.5-9.6 | |||
| 12 (1,*) | 17 (1,2,*) | 9 | |||
| 11 (1,*) | 16 (1,2,*) | ||||
| 10 (1,*) | 15 (1,2,*) | ||||
| 9 (1,*) | 14 (1,2,*) | ||||
| 8 (1,*) | 13 (1,2,*) | ||||
| 7 (1,*) | 12 (1,2,*) | ||||
| 6 (1,*) | 11 (1,2,*) | ||||
| 5 (1,*) | 10 (1,2,*) | ||||
| 4 (1,*) | 9 (1,2,*) | ||||
| 3.6 (1,*) | 8 (1,2,*) | ||||
| 3.5 (1,*) | 7 (1,2,*) | ||||
| 3 (1,*) | 6 (1,2,*) | ||||
| 2 (1,*) | 5 (1,2,*) | ||||
| 4 (1,2,*) | |||||
| iOS Safari | Opera Mini | Android Browser | Blackberry Browser | Opera Mobile | Android Chrome | Android Firefox | IE Mobile | Android UC Browser | Samsung Internet | QQ Browser | Baidu Browser |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 11 (1) | |||||||||||
| 10.3 (1) | all | 56 (1) | 10 (1,2,*) | 37 (1) | 59 (1) | 54 (1) | 11 | 11.4 (1,2,*) | 5 (1) | 1.2 (1) | 7.12 (1) |
| 10.0-10.2 (1) | 4.4.3-4.4.4 (1,2,*) | 7 (1,2,*) | 12.1 | 10 | 4 (1,2,*) | ||||||
| 9.3 (1) | 4.4 (1,2,*) | 12 | |||||||||
| 9.0-9.2 (1) | 4.2-4.3 (1,2,*) | 11.5 | |||||||||
| Show all | |||||||||||
| 8.1-8.4 (1,*) | 4.1 (1,2,*) | 11.1 | |||||||||
| 8 (1,*) | 4 (1,2,*) | 11 | |||||||||
| 7.0-7.1 (1,*) | 3 (1,2,*) | 10 | |||||||||
| 6.0-6.1 (1,2,*) | 2.3 (1,2,*) | ||||||||||
| 5.0-5.1 (1,2,*) | 2.2 (1,2,*) | ||||||||||
| 4.2-4.3 (1,2,*) | 2.1 (1,2,*) | ||||||||||
| 4.0-4.1 (1,2,*) | |||||||||||
| 3.2 (1,2,*) | |||||||||||
Notes
Partial support refers to not supporting the
break-before,break-after,break-insideproperties. WebKit- and Blink-based browsers do have equivalent support for the non-standard-webkit-column-break-*properties to accomplish the same result (but only theautoandalwaysvalues). Firefox does not supportbreak-*.Partial support refers to not supporting the
column-fillproperty.
- * Partial support with prefix.
Bugs
In Firefox, the property
column-span(or-moz-column-span) does not yet work. See the bug.Chrome is reported to incorrectly calculate the container height, and often breaks on margins, padding, and can display 1px of the next column at the bottom of the previous column. Part of these issues can be solved by adding
-webkit-perspective:1;to the column container. This creates a new stacking context for the container, and apparently causes chrome to (re)calculate column layout.Browsers behave differently when flowing
ollist numbers in columns: IE and Safari only show numbers for the first column. Chrome does not show any numbers. Only Firefox behaves as expected with numbers showing for all items.IE has been reported to incorrectly break on elements across columns when having more than 3 columns.
IE 10 has a bug where text-shadow doesn't work when used inside columns see testcase
Firefox does not split tables into columns
Firefox and Chrome do not support columns on the <fieldset> element see bug
Safari 5-8 is known to render columns less evenly than other browsers
Safari 5.1-10+ does not work as expected with
min-heightsee testcase see bug
Resources
- Dev.Opera article
- Introduction page
- WebPlatform Docs
- Polyfill
- Chrome platform status for CSS column-fill
Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
http://caniuse.com/#feat=multicolumn
