CSS3 Multiple column layout

Method of flowing information in multiple columns

Spec	https://www.w3.org/TR/css3-multicol/
Status	W3C Candidate Recommendation

IE	Edge	Firefox	Chrome	Safari	Opera
			98 ⁽³⁾
		95 ⁽³⁾	97 ⁽³⁾
		94 ⁽³⁾	96 ⁽³⁾	TP
11	95 ⁽³⁾	93 ⁽³⁾	95 ⁽³⁾	15	80 ⁽³⁾
10	94 ⁽³⁾	92 ⁽³⁾	94 ⁽³⁾	14.1	79 ⁽³⁾
9	93 ⁽³⁾	91 ⁽³⁾	93 ⁽³⁾	14	78 ⁽³⁾
8	92 ⁽³⁾	90 ⁽³⁾	92 ⁽³⁾	13.1	77 ⁽³⁾
Show all
7	91 ⁽³⁾	89 ⁽³⁾	91 ⁽³⁾	13	76 ⁽³⁾
6	90 ⁽³⁾	88 ⁽³⁾	90 ⁽³⁾	12.1	75 ⁽³⁾
5.5	89 ⁽³⁾	87 ⁽³⁾	89 ⁽³⁾	12	74 ⁽³⁾
	88 ⁽³⁾	86 ⁽³⁾	88 ⁽³⁾	11.1	73 ⁽³⁾
	87 ⁽³⁾	85 ⁽³⁾	87 ⁽³⁾	11	72 ⁽³⁾
	86 ⁽³⁾	84 ⁽³⁾	86 ⁽³⁾	10.1	71 ⁽³⁾
	85 ⁽³⁾	83 ⁽³⁾	85 ⁽³⁾	10	70 ⁽³⁾
	84 ⁽³⁾	82 ⁽³⁾	84 ⁽³⁾	9.1 ⁽¹⁾	69 ⁽³⁾
	83 ⁽³⁾	81 ⁽³⁾	83 ⁽³⁾	9 ⁽¹⁾	68 ⁽³⁾
	81 ⁽³⁾	80 ⁽³⁾	81 ⁽³⁾	8 ^(1,*)	67 ⁽³⁾
	80 ⁽³⁾	79 ⁽³⁾	80 ⁽³⁾	7.1 ^(1,*)	66 ⁽³⁾
	79 ⁽³⁾	78 ⁽³⁾	79 ⁽³⁾	7 ^(1,*)	65 ⁽³⁾
	18	77 ⁽³⁾	78 ⁽³⁾	6.1 ^(1,2,*)	64 ⁽³⁾
	17	76 ⁽³⁾	77 ⁽³⁾	6 ^(1,2,*)	63 ⁽³⁾
	16	75 ⁽³⁾	76 ⁽³⁾	5.1 ^(1,2,*)	62 ⁽³⁾
	15	74 ⁽³⁾	75 ⁽³⁾	5 ^(1,2,*)	60 ⁽³⁾
	14	73 ⁽³⁾	74 ⁽³⁾	4 ^(1,2,*)	58 ⁽³⁾
	13	72 ⁽³⁾	73 ⁽³⁾	3.2 ^(1,2,*)	57 ⁽³⁾
	12	71 ⁽³⁾	72 ⁽³⁾	3.1 ^(1,2,*)	56 ⁽³⁾
		70 ⁽³⁾	71 ⁽³⁾		55 ⁽³⁾
		69 ⁽³⁾	70 ⁽³⁾		54 ⁽³⁾
		68 ⁽³⁾	69 ⁽³⁾		53 ⁽³⁾
		67 ⁽³⁾	68 ⁽³⁾		52 ⁽³⁾
		66 ⁽³⁾	67 ⁽³⁾		51 ⁽³⁾
		65 ⁽³⁾	66 ⁽³⁾		50 ⁽³⁾
		64 ⁽¹⁾	65 ⁽³⁾		49 ⁽³⁾
		63 ⁽¹⁾	64 ⁽³⁾		48 ⁽³⁾
		62 ⁽¹⁾	63 ⁽³⁾		47 ⁽³⁾
		61 ⁽¹⁾	62 ⁽³⁾		46 ⁽³⁾
		60 ⁽¹⁾	61 ⁽³⁾		45 ⁽³⁾
		59 ⁽¹⁾	60 ⁽³⁾		44 ⁽³⁾
		58 ⁽¹⁾	59 ⁽³⁾		43 ⁽³⁾
		57 ⁽¹⁾	58 ⁽³⁾		42 ⁽³⁾
		56 ⁽¹⁾	57 ⁽³⁾		41 ⁽³⁾
		55 ⁽¹⁾	56 ⁽³⁾		40 ⁽³⁾
		54 ⁽¹⁾	55 ⁽³⁾		39 ⁽³⁾
		53 ⁽¹⁾	54 ⁽³⁾		38 ⁽³⁾
		52 ⁽¹⁾	53 ⁽³⁾		37 ⁽³⁾
		51 ^(1,*)	52 ⁽³⁾		36 ^(1,2,*)
		50 ^(1,*)	51 ⁽³⁾		35 ^(1,2,*)
		49 ^(1,*)	50 ⁽³⁾		34 ^(1,2,*)
		48 ^(1,*)	49 ^(1,2,*)		33 ^(1,2,*)
		47 ^(1,*)	48 ^(1,2,*)		32 ^(1,2,*)
		46 ^(1,*)	47 ^(1,2,*)		31 ^(1,2,*)
		45 ^(1,*)	46 ^(1,2,*)		30 ^(1,2,*)
		44 ^(1,*)	45 ^(1,2,*)		29 ^(1,2,*)
		43 ^(1,*)	44 ^(1,2,*)		28 ^(1,2,*)
		42 ^(1,*)	43 ^(1,2,*)		27 ^(1,2,*)
		41 ^(1,*)	42 ^(1,2,*)		26 ^(1,2,*)
		40 ^(1,*)	41 ^(1,2,*)		25 ^(1,2,*)
		39 ^(1,*)	40 ^(1,2,*)		24 ^(1,2,*)
		38 ^(1,*)	39 ^(1,2,*)		23 ^(1,2,*)
		37 ^(1,*)	38 ^(1,2,*)		22 ^(1,2,*)
		36 ^(1,*)	37 ^(1,2,*)		21 ^(1,2,*)
		35 ^(1,*)	36 ^(1,2,*)		20 ^(1,2,*)
		34 ^(1,*)	35 ^(1,2,*)		19 ^(1,2,*)
		33 ^(1,*)	34 ^(1,2,*)		18 ^(1,2,*)
		32 ^(1,*)	33 ^(1,2,*)		17 ^(1,2,*)
		31 ^(1,*)	32 ^(1,2,*)		16 ^(1,2,*)
		30 ^(1,*)	31 ^(1,2,*)		15 ^(1,2,*)
		29 ^(1,*)	30 ^(1,2,*)		12.1
		28 ^(1,*)	29 ^(1,2,*)		12
		27 ^(1,*)	28 ^(1,2,*)		11.6
		26 ^(1,*)	27 ^(1,2,*)		11.5
		25 ^(1,*)	26 ^(1,2,*)		11.1
		24 ^(1,*)	25 ^(1,2,*)		11
		23 ^(1,*)	24 ^(1,2,*)		10.6
		22 ^(1,*)	23 ^(1,2,*)		10.5
		21 ^(1,*)	22 ^(1,2,*)		10.0-10.1
		20 ^(1,*)	21 ^(1,2,*)		9.5-9.6
		19 ^(1,*)	20 ^(1,2,*)		9
		18 ^(1,*)	19 ^(1,2,*)
		17 ^(1,*)	18 ^(1,2,*)
		16 ^(1,*)	17 ^(1,2,*)
		15 ^(1,*)	16 ^(1,2,*)
		14 ^(1,*)	15 ^(1,2,*)
		13 ^(1,*)	14 ^(1,2,*)
		12 ^(1,*)	13 ^(1,2,*)
		11 ^(1,*)	12 ^(1,2,*)
		10 ^(1,*)	11 ^(1,2,*)
		9 ^(1,*)	10 ^(1,2,*)
		8 ^(1,*)	9 ^(1,2,*)
		7 ^(1,*)	8 ^(1,2,*)
		6 ^(1,*)	7 ^(1,2,*)
		5 ^(1,*)	6 ^(1,2,*)
		4 ^(1,*)	5 ^(1,2,*)
		3.6 ^(1,*)	4 ^(1,2,*)
		3.5 ^(1,*)
		3 ^(1,*)
		2 ^(1,*)

Safari on iOS	Opera Mini	Android Browser	Blackberry Browser	Opera Mobile	Android Chrome	Android Firefox	IE Mobile	Android UC Browser	Samsung Internet	QQ Browser	Baidu Browser	KaiOS Browser
15	all	94 ⁽³⁾	10 ^(1,2,*)	64 ⁽³⁾	94 ⁽³⁾	92 ⁽³⁾	11	12.12	15.0	10.4 ⁽¹⁾	7.12 ⁽¹⁾	2.5 ^(1,*)
14.5-14.8		4.4.3-4.4.4 ^(1,2,*)	7 ^(1,2,*)	12.1			10		14.0
14.0-14.4		4.4 ^(1,2,*)		12					13.0
13.4-13.7		4.2-4.3 ^(1,2,*)		11.5					12.0
Show all
13.3		4.1 ^(1,2,*)		11.1					11.1-11.2
13.2		4 ^(1,2,*)		11					10.1
13.0-13.1		3 ^(1,2,*)		10					9.2
12.2-12.5		2.3 ^(1,2,*)							8.2
12.0-12.1		2.2 ^(1,2,*)							7.2-7.4
11.3-11.4		2.1 ^(1,2,*)							6.2-6.4
11.0-11.2									5.0-5.4
10.3									4 ^(1,2,*)
10.0-10.2
9.3 ⁽¹⁾
9.0-9.2 ⁽¹⁾
8.1-8.4 ^(1,*)
8 ^(1,*)
7.0-7.1 ^(1,*)
6.0-6.1 ^(1,2,*)
5.0-5.1 ^(1,2,*)
4.2-4.3 ^(1,2,*)
4.0-4.1 ^(1,2,*)
3.2 ^(1,2,*)

Notes

Partial support refers to not supporting the properties break-before, break-after, and break-inside. WebKit- and Blink-based browsers have equivalent support with the non-standard -webkit-column-break-* properties, but only for the values auto and always. Firefox does not support the break-* properties but supports the now-obsolete page-break-* properties in the paging (printing) context.
Partial support refers to not supporting the column-fill property.
Partial support refers to not supporting the values avoid-column, column, and avoid (in the column context) for the properties break-before, break-after, and break-inside.

^* Partial support with prefix.

Bugs

Firefox 1-64 does not support the properties break-before, break-after, and break-inside. Firefox 65+ supports these properties, but not the values avoid-column, column, and avoid (in the column context). See the bug.
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, often breaks on margins and padding, and can display one pixel of the next column at the bottom of the previous column. Some 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 ol list numbers in columns: IE and Safari display numbers only in the first column. Chrome does not display any numbers. Only Firefox behaves as expected and displays numbers in all columns.
IE is reported to incorrectly break on elements across columns when having more than three columns.
IE 10 has a bug where text-shadow doesn't work when used inside columns. See a 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-height. See a testcase See bug.

Resources

Data by caniuse.com
Licensed under the Creative Commons Attribution License v4.0.
https://caniuse.com/multicolumn