Web/CSS/Layout cookbook/Column layouts

You will often need to create a layout which has a number of columns, and CSS provides several ways to do this. Whether you use Grid, Flexbox or Multi-column layout will depend on what you are trying to achieve, and in this recipe we explore these options.

[[File:../../../../../../media.prod.mdn.mozit.cloud/attachments/2018/09/23/16183/7c5ba52a4ee179e141192f6f7ab5b82b/cookbook-multiple-columns.png|three different styles of layouts which have two columns in the container.]]

Requirements

There are a number of design patterns you might want to achieve with your columns:

• A continuous thread of content broken up into newspaper-style columns.
• A single row of items arranged as columns, with all heights being equal.
• Multiple rows of columns lined up by row and column.

The recipes

You need to choose different layout methods in order to achieve your requirements.

A continuous thread of content — multi-column layout

If you create columns using multi-column layout your text will remain as a continuous stream filling each column in turn. The columns must all be the same size, and you are unable to target an individual column or the content of an individual column.

You can control the gaps between columns with the column-gap property, and add a rule between columns using column-rule.

Download this example

Use multicol when:

• You want your text to display in newspaper-like columns.
• You have a set of small items you want to break into columns.
• You do not need to target individual column boxes for styling.

A single row of items with equal heights — flexbox

Flexbox can be used to break content into columns by setting flex-direction to row, however flexbox targets the elements inside the flex container and will place each direct child into a new column. This is a different behavior to what you saw with multicol.

There is currently no way to add a rule between flex items, and browser support for the column-gap and row-gap properties is limited. Therefore to create gaps between items use a margin.

Download this example

Flexbox can also be used to create layouts where the flex items wrap onto new rows, by setting the flex-wrap property on the container to wrap. These new flex lines will distribute space along that line only — the items in the new line will not line up with items in the line above, as you'll see in the example below. This is why flexbox is described as one-dimensional. It is designed for controlling layout as a row or a column, but not both at the same time.

Download this example

Use flexbox:

• For single rows or columns of items.
• When you want to do alignment on the cross axis after laying out your items.
• When you are happy for wrapped items to share out space along their line only and not line up with items in other lines.

Lining items up in rows and columns — grid layout

If what you want is a layout where items line up in rows and columns then you should choose CSS Grid Layout. Grid Layout works on the direct children of the grid container in a similar way to the manner in which flexbox works on the direct children of the flex container, however with CSS Grid you can line your items up in rows and columns — it is described as two-dimensional.

Download this example

Use Grid:

• For multiple rows or columns of items.
• When you want to be able to align the items on the block and inline axes.
• When you want items to line up in rows and columns.

Browser compatibility

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

column-width

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
column-width	Chrome Full support 50 Full support 50 Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12 Full support 12 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Full support 50 Full support 50 No support 1.5 — 74 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -moz- Notes' Prior to version 37, multiple columns didn't work with display: table-caption elements.	IE Full support 10	Opera Full support 11.1 Full support 11.1 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 9 Full support 9 Full support 3 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 50 Full support 50 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 50 Full support 50 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 50 Full support 50 Full support 4 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -moz- Notes' Prior to version 37, multiple columns didn't work with display: table-caption elements.	Opera Android Full support 11.1 Full support 11.1 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 9 Full support 9 Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 5.0 Full support 5.0 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-
Intrinsic sizes Experimental'	Chrome No support No	Edge No support No	Firefox No support No	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support  

Full support

No support  

No support

Experimental. Expect behavior to change in the future.'

Experimental. Expect behavior to change in the future.

See implementation notes.'

See implementation notes.

Requires a vendor prefix or different name for use.'

Requires a vendor prefix or different name for use.

column-rule

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
column-rule	Chrome Full support 50 Full support 50 Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12 Full support 12 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Full support 52 Full support 52 No support 3.5 — 74 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -moz- Notes' Before Firefox 3, the default value for the normal keyword was 0 and not 1em.	IE Full support 10	Opera Full support 11.1 Full support 11.1 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari Full support 9 Full support 9 Full support 3 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 50 Full support 50 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 50 Full support 50 Full support 18 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 52 Full support 52 Full support 4 Prefixed' Prefixed' Implemented with the vendor prefix: -moz-	Opera Android Full support 11.1 Full support 11.1 Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Safari iOS Full support 9 Full support 9 Full support 1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 5.0 Full support 5.0 Full support 1.0 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-

Legend

Full support  

Full support

See implementation notes.'

See implementation notes.

Requires a vendor prefix or different name for use.'

Requires a vendor prefix or different name for use.

flex

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
flex	Chrome Full support 29 Full support 29 Full support 21 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12 Full support 12 Full support 12 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Full support 20 Notes' Full support 20 Notes' Notes' Since Firefox 28, multi-line flexbox is supported. Notes' Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0. Notes' Until Firefox 61, flex items that are sized according to their content are sized using fit-content, not max-content. No support 18 — 28 Disabled' Disabled' From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 48 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE Full support 11 Notes' Full support 11 Notes' Notes' Internet Explorer 11 ignores uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info. Notes' Internet Explorer 11 considers a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info. Full support 10 Prefixed' Notes' Prefixed' Implemented with the vendor prefix: -ms- Notes' Internet Explorer 10 and 11 ignore uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info. Notes' Internet Explorer 10 and 11 consider a unitless value in the flex-basis part to be syntactically invalid (and will thus be ignored). A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.	Opera Full support 12.1	Safari Full support 9 Full support 9 Full support 6.1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 4.4 Full support 4.4 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 29 Full support 29 Full support 25 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 20 Notes' Full support 20 Notes' Notes' Since Firefox 28, multi-line flexbox is supported. Notes' Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0. Notes' Until Firefox 61, flex items that are sized according to their content are sized using fit-content, not max-content. No support 18 — 28 Disabled' Disabled' From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. Full support 49 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- Full support 48 Prefixed' Disabled' Prefixed' Implemented with the vendor prefix: -webkit- Disabled' From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 12.1	Safari iOS Full support 9 Full support 9 Full support 7 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 2.0 Full support 2.0 Full support 1.5 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-

Legend

Full support  

Full support

See implementation notes.'

See implementation notes.

User must explicitly enable this feature.'

User must explicitly enable this feature.

Requires a vendor prefix or different name for use.'

Requires a vendor prefix or different name for use.

flex-wrap

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
flex-wrap	Chrome Full support 29 Full support 29 Full support 21 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Edge Full support 12	Firefox Full support 28	IE Partial support 11 Notes' Partial support 11 Notes' Notes' Partial support due to large number of bugs present. See Flexbugs.	Opera Full support 17	Safari Full support 9 Full support 9 Full support 6.1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	WebView Android Full support 4.4 Full support 4.4 Full support ≤37 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Chrome Android Full support 29 Full support 29 Full support 25 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Firefox Android Full support 52	Opera Android Full support 18	Safari iOS Full support 9 Full support 9 Full support 6.1 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-	Samsung Internet Android Full support 2.0 Full support 2.0 Full support 1.5 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit-

Legend

Full support  

Full support

Partial support  

Partial support

See implementation notes.'

See implementation notes.

Requires a vendor prefix or different name for use.'

Requires a vendor prefix or different name for use.

grid-template-columns

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
grid-template-columns	Chrome Full support 57 Full support 57 Full support 29 Disabled' Disabled' From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 16 Full support 16 No support 12 — 79 Alternate Name' Alternate Name' Uses the non-standard name: -ms-grid-rows	Firefox Full support 52 Full support 52 No support 40 — 59 Disabled' Disabled' From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE Full support 10 Alternate Name' Full support 10 Alternate Name' Alternate Name' Uses the non-standard name: -ms-grid-columns	Opera Full support 44 Full support 44 Full support 28 Disabled' Disabled' From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57 Full support 57 Full support 29 Disabled' Disabled' From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android Full support 52 Full support 52 No support 40 — 59 Disabled' Disabled' From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 43 Full support 43 Full support 28 Disabled' Disabled' From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0
Animation of tracks	Chrome No support No	Edge No support No	Firefox Full support 66	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android Full support 66	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No
fit-content()	Chrome Full support 29	Edge Full support 16	Firefox Full support 51	IE No support No	Opera Full support 44	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57	Firefox Android Full support 51	Opera Android Full support 43	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0
minmax()	Chrome Full support 57 Full support 57 Full support 29 Disabled' Disabled' From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 16	Firefox Full support 52 Full support 52 No support 40 — 59 Disabled' Disabled' From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 44 Full support 44 Full support 28 Disabled' Disabled' From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57 Full support 57 Full support 29 Disabled' Disabled' From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android Full support 52 Full support 52 No support 40 — 59 Disabled' Disabled' From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 43 Full support 43 Full support 28 Disabled' Disabled' From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0
repeat()	Chrome Full support 57 Full support 57 Full support 38 Disabled' Disabled' From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Edge Full support 16	Firefox Partial support 57 Notes' Partial support 57 Notes' Notes' repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507). No support 52 — 57 Notes' Notes' calc() doesn't work in repeat() (see bug 1350069). No support 40 — 59 Disabled' Disabled' From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 44 Full support 44 Full support 28 Disabled' Disabled' From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari Full support 10.1	WebView Android Full support 57	Chrome Android Full support 57 Full support 57 Full support 38 Disabled' Disabled' From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android Full support 52 Full support 52 No support 40 — 59 Disabled' Disabled' From version 40 until version 59 (exclusive): this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	Opera Android Full support 43 Full support 43 Full support 28 Disabled' Disabled' From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari iOS Full support 10.3	Samsung Internet Android Full support 6.0
subgrid	Chrome No support No	Edge No support No	Firefox Full support 71 Full support 71 Full support 69 Notes' Disabled' Notes' Enabled by default in Firefox Nightly. Disabled' From version 69: this feature is behind the layout.css.grid-template-subgrid-value.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.	IE No support No	Opera No support No	Safari No support No	WebView Android No support No	Chrome Android No support No	Firefox Android No support No	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support  

Full support

Partial support  

Partial support

No support  

No support

See implementation notes.'

See implementation notes.

User must explicitly enable this feature.'

User must explicitly enable this feature.

Uses a non-standard name.'

Uses a non-standard name.

Resources on MDN

• Guide to Multi-column Layout
• Guide to Flexbox
• Guide to CSS Grid Layout

Column layouts by Mozilla Contributors is licensed under CC-BY-SA 2.5.