Widely availableSupported across all major browsers. Safe to use in production.
Layout Widely available

Multi-column layout

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.

Layout

Overview

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.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
column-count
50
12
52
9
50
9
multicol context

Supported in Multi-column Layout
123
123
17.4
123
17.4
auto
1
12
1.5
3
18
2
Other
css.properties.column-gap

The column-gap CSS property sets the size of the gap (Gutters) between an element's columns.
1
12
1.5
3
18
2
CSS property
multicol context

Supported in Multi-column Layout
50
12
52
10
50
10
multicol context.calc values

`calc()` values
66
16
61
12.1
66
12.2
multicol context.percentage values

`<percentage>` values
66
16
61
12
66
12
normal
1
12
1.5
3
18
2
Other
css.properties.column-rule

The column-rule shorthand CSS property sets the width, style, and color of the line drawn between columns in a multi-column layout.
50
12
52
9
50
9
css.properties.column-rule-color

The column-rule-color CSS property sets the color of the line drawn between columns in a multi-column layout.
50
12
52
9
50
9
CSS property
transparent
1
12
3.5
3
18
2
Other
css.properties.column-rule-style

The column-rule-style CSS property sets the style of the line drawn between columns in a multi-column layout.
50
12
52
9
50
9
CSS property
dashed
1
12
3.5
3
18
2
dotted
1
12
3.5
3
18
2
double
1
12
3.5
3
18
2
groove
1
12
3.5
3
18
2
hidden
1
12
3.5
3
18
2
inset
1
12
3.5
3
18
2
none
1
12
3.5
3
18
2
outset
1
12
3.5
3
18
2
ridge
1
12
3.5
3
18
2
solid
1
12
3.5
3
18
2
Other
css.properties.column-rule-width

The column-rule-width CSS property sets the width of the line drawn between columns in a multi-column layout.
50
12
52
9
50
9
CSS property
medium
1
12
3.5
3
18
2
thick
1
12
3.5
3
18
2
thin
1
12
3.5
3
18
2
dashed
1
12
3.5
3
18
2
dotted
1
12
3.5
3
18
2
double
1
12
3.5
3
18
2
groove
1
12
3.5
3
18
2
hidden
1
12
3.5
3
18
2
inset
1
12
3.5
3
18
2
medium
1
12
3.5
3
18
2
none
1
12
3.5
3
18
2
outset
1
12
3.5
3
18
2
ridge
1
12
3.5
3
18
2
solid
1
12
3.5
3
18
2
thick
1
12
3.5
3
18
2
thin
1
12
3.5
3
18
2
transparent
1
12
3.5
3
18
2
Other
css.properties.column-width

The column-width CSS property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the column-width value. If the width of the container is narrower than the specified value, the single column's width will be smaller than the declared column width.
50
12
50
9
50
9
CSS property
auto
1
12
1.5
3
18
2
Other
css.properties.columns

The columns CSS shorthand property sets the maximum number of columns to use when drawing an element's contents, along with the minimum width and maximum height of the element's columns.
50
12
52
9
50
9
CSS property
multicol context

Supported in Multi-column Layout
66
16
61
14.1
66
14.5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 3 item(s)
Removed
  • This feature was removed in a later browser version (74)
Compatibility
  • Available with a vendor prefix: -moz- (1.5)
Implementation note
  • Before version 37, multiple columns didn't work with `display: table-caption` elements.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (2)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 3 item(s)
Removed
  • This feature was removed in a later browser version (74)
Compatibility
  • Available with a vendor prefix: -moz- (1.5)
Implementation note
  • Before Firefox 3, the default value for the `normal` keyword was `0` and not `1em`.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 3 item(s)
Removed
  • This feature was removed in a later browser version (74)
Compatibility
  • Available with a vendor prefix: -moz- (3.5)
Implementation note
  • Before Firefox 3, the default value for the `normal` keyword was `0` and not `1em`.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (74)
Compatibility
  • Available with a vendor prefix: -moz- (3.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (74)
Compatibility
  • Available with a vendor prefix: -moz- (3.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (74)
Compatibility
  • Available with a vendor prefix: -moz- (3.5)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 3 item(s)
Removed
  • This feature was removed in a later browser version (74)
Compatibility
  • Available with a vendor prefix: -moz- (1.5)
Implementation note
  • Before version 37, multiple columns didn't work with `display: table-caption` elements.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (1)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (50)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (12)
Notes 3 item(s)
Removed
  • This feature was removed in a later browser version (74)
Compatibility
  • Available with a vendor prefix: -moz- (9)
Implementation note
  • Before version 37, multiple columns didn't work with `display: table-caption` elements.
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (50)
Notes 1 item(s)
Compatibility
  • Available with a vendor prefix: -webkit- (3.2)

Syntax

CSS 
.article-body { column-count: 3; column-gap: 2rem; column-rule: 1px solid #ddd; } /* width-based auto-columns */ .list-columns { column-width: 200px; column-gap: 1.5rem; }

Live demo

column-count: 2

Multi-column layout Column-count: 2 demo.

PreviewFullscreen

Column-rule with

Multi-column layout Column-rule with demo.

PreviewFullscreen

Column-width(automulticol only)

Multi-column layout Column-width(automulticol only) demo.

PreviewFullscreen

Use cases

  • Using Multi-column layout

    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.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features