Web/CSS/column-gap

The column-gap CSS property sets the size of the gap (gutter) between an element's columns.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Initially a part of Multi-column Layout, the definition of column-gap has been broadened to include multiple layout methods. Now specified in Box Alignment, it may be used in Multi-column, Flexible Box, and Grid layouts.

Syntax

/* Keyword value */
column-gap: normal; 

/* <length> values */
column-gap: 3px;
column-gap: 2.5em;

/* <percentage> value */
column-gap: 3%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;

The column-gap property is specified as one of the values listed below.

Values

normal

The browser's default spacing is used between columns. For multi-column layout this is specified as 1em. For all other layout types it is 0.

<length>

The size of the gap between columns, defined as a <length>. The <length> property's value must be non-negative.

<percentage>

The size of the gap between columns, defined as a <percentage>. The <percentage> property's value must be non-negative.

Formal definition

Initial value	normal
Applies to	multi-column elements, flex containers, grid containers
Inherited	no
Percentages	refer to corresponding dimension of the content area
Computed value	as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation type	a length, percentage or calc();

Formal syntax

normal | <length-percentage>where <length-percentage> = <length> | <percentage>

Examples

Flex layout

HTML

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#flexbox {
  display: flex;
  height: 100px;
  column-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: auto;
}

Grid layout

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  column-gap: 20px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Multi-column layout

HTML

<p class="content-box">
  This is some multi-column text with a 40px column
  gap created with the CSS `column-gap` property.
  Don't you think that's fun and exciting? I sure do!
</p>

CSS

.content-box {
  column-count: 3;
  column-gap: 40px;
}

Specifications

Specification	Status	Comment
CSS Box Alignment Module Level 3The definition of 'column-gap' in that specification.	Working Draft	Applies to grid and flexbox
CSS Grid LayoutThe definition of 'column-gap' in that specification.	Candidate Recommendation	Specifies how this property affects grid layouts
CSS Multi-column Layout ModuleThe definition of 'column-gap' in that specification.	Working Draft	Initial definition

Browser compatibility

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.

Support in Flex layout

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
Supported in Flex Layout	Chrome Full support 84	Edge Full support 84	Firefox Full support 63	IE No support No	Opera Full support 70	Safari No support No	WebView Android Full support 84	Chrome Android Full support 84	Firefox Android Full support 63	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

Support in Grid layout

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
Supported in Grid Layout	Chrome Full support 66 Full support 66 Full support 57 Alternate Name' Alternate Name' Uses the non-standard name: grid-column-gap Full support 29 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: grid-column-gap 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 Full support 16 Alternate Name' Alternate Name' Uses the non-standard name: grid-column-gap	Firefox Full support 61 Full support 61 Full support 52 Alternate Name' Alternate Name' Uses the non-standard name: grid-column-gap No support 40 — 59 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: grid-column-gap 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 53 Full support 53 Full support 44 Alternate Name' Alternate Name' Uses the non-standard name: grid-column-gap Full support 28 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: grid-column-gap Disabled' From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari Full support 12.1 Full support 12.1 Full support 10.1 Alternate Name' Alternate Name' Uses the non-standard name: grid-column-gap	WebView Android Full support 66 Full support 66 Full support 57 Alternate Name' Alternate Name' Uses the non-standard name: grid-column-gap	Chrome Android Full support 66 Full support 66 Full support 57 Alternate Name' Alternate Name' Uses the non-standard name: grid-column-gap Full support 29 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: grid-column-gap 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 61 Full support 61 Full support 52 Alternate Name' Alternate Name' Uses the non-standard name: grid-column-gap No support 40 — 59 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: grid-column-gap 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 47 Full support 47 Full support 43 Alternate Name' Alternate Name' Uses the non-standard name: grid-column-gap Full support 28 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: grid-column-gap Disabled' From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari iOS Full support 12 Full support 12 Full support 10.3 Alternate Name' Alternate Name' Uses the non-standard name: grid-column-gap	Samsung Internet Android Full support 9.0 Full support 9.0 Full support 6.0 Alternate Name' Alternate Name' Uses the non-standard name: grid-column-gap

Legend

Full support  

Full support

No support  

No support

User must explicitly enable this feature.'

User must explicitly enable this feature.

Uses a non-standard name.'

Uses a non-standard name.

Support in Multi-column layout

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
Supported in Multi-column Layout	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 1.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 37 Full support 37 Full support 15 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- No support 11.1 — 15	Safari Full support 10 Full support 10 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 37 Full support 37 Full support 14 Prefixed' Prefixed' Implemented with the vendor prefix: -webkit- No support 11.1 — 14	Safari iOS Full support 10 Full support 10 Full support 3 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-
calc() values	Chrome Full support 66	Edge Full support 16	Firefox Full support 61	IE No support No	Opera Full support 53	Safari No support No	WebView Android Full support 66	Chrome Android Full support 66	Firefox Android Full support 61	Opera Android Full support 47	Safari iOS No support No	Samsung Internet Android Full support 9.0
<percentage> values	Chrome Full support 66	Edge Full support 16	Firefox Full support 61	IE No support No	Opera Full support 53	Safari No support No	WebView Android Full support 66	Chrome Android Full support 66	Firefox Android Full support 61	Opera Android Full support 47	Safari iOS No support No	Samsung Internet Android Full support 9.0

Legend

Full support  

Full support

No support  

No 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.

See also

• Related CSS properties: row-gap, gap
• Grid Layout Guide: Basic concepts of grid layout - Gutters
• Multi-column Layout Guide: Styling Columns

column-gap (grid-column-gap) by Mozilla Contributors is licensed under CC-BY-SA 2.5.