Multi-column layoutBaseline · Widely available

Multi-column layout flows an element's content across one or more columns in a single row, without affecting the display property of its children.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Mar 7, 2017. Widely available since Sep 7, 2019.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–49Not supported

50+Supportedsince Apr 13, 2016

Current: 155

Edge

12+Supportedsince Jul 29, 2015

Current: 154

Firefox

1–51Not supported

52+Supportedsince Mar 7, 2017

Current: 157

Safari

1–8Not supported

9+Supportedsince Sep 30, 2015

Current: 27

MobileChrome Android

18–49Not supported

50+Supportedsince Apr 13, 2016

Current: 155

Firefox Android

4–51Not supported

52+Supportedsince Mar 7, 2017

Current: 157

Safari iOS

1–8Not supported

9+Supportedsince Sep 16, 2015

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: column-count.

Feature detection

CSS · check before using

@supports (column-gap: initial) {
  /* styles that rely on column-gap */
}

/* or in JavaScript */
if (CSS.supports("column-gap", "initial")) {
  // use it
}

Documentation (MDN)

Specification

drafts.csswg.org/css-multicol-1 ↗

Sub-features

Support for each part of the feature (47). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
align-content.context_multicol	123	123	✕	17.4	123	✕	17.4
column-count	50	12	52	9	50	52	9
column-count.auto	50	12	52	9	50	52	9
column-gap	1	12	1.5	3	18	4	2
column-gap.multicol_context	50	12	52	10	50	52	10
column-gap.multicol_context.calc_values	66	16	61	12.1	66	61	12.2
column-gap.multicol_context.percentage_values	66	16	61	12	66	61	12
column-gap.normal	1	12	1.5	3	18	4	2
column-rule	50	12	52	9	50	52	9
column-rule-color	50	12	52	9	50	52	9
column-rule-color.currentColor	50	12	52	9	50	52	9
column-rule-color.transparent	50	12	52	9	50	52	9
column-rule-style	50	12	52	9	50	52	9
column-rule-style.dashed	50	12	52	9	50	52	9
column-rule-style.dotted	50	12	52	9	50	52	9
column-rule-style.double	50	12	52	9	50	52	9
column-rule-style.groove	50	12	52	9	50	52	9
column-rule-style.hidden	50	12	52	9	50	52	9
column-rule-style.inset	50	12	52	9	50	52	9
column-rule-style.none	50	12	52	9	50	52	9

Show 27 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
column-rule-style.outset	50	12	52	9	50	52	9
column-rule-style.ridge	50	12	52	9	50	52	9
column-rule-style.solid	50	12	52	9	50	52	9
column-rule-width	50	12	52	9	50	52	9
column-rule-width.medium	50	12	52	9	50	52	9
column-rule-width.thick	50	12	52	9	50	52	9
column-rule-width.thin	50	12	52	9	50	52	9
column-rule.currentColor	50	12	52	9	50	52	9
column-rule.dashed	50	12	52	9	50	52	9
column-rule.dotted	50	12	52	9	50	52	9
column-rule.double	50	12	52	9	50	52	9
column-rule.groove	50	12	52	9	50	52	9
column-rule.hidden	50	12	52	9	50	52	9
column-rule.inset	50	12	52	9	50	52	9
column-rule.medium	50	12	52	9	50	52	9
column-rule.none	50	12	52	9	50	52	9
column-rule.outset	50	12	52	9	50	52	9
column-rule.ridge	50	12	52	9	50	52	9
column-rule.solid	50	12	52	9	50	52	9
column-rule.thick	50	12	52	9	50	52	9
column-rule.thin	50	12	52	9	50	52	9
column-rule.transparent	50	12	52	9	50	52	9
column-width	50	12	50	9	50	50	9
column-width.auto	50	12	50	9	50	50	9
columns	50	12	52	9	50	52	9
columns.auto	50	12	52	9	50	52	9
gap.multicol_context	66	16	61	14.1	66	61	14.5