column-gap (grid-column-gap) - CSS: Cascading Style Sheets

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

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.

CSS Grid Layout initially defined the grid-column-gap property. This prefixed property is being replaced by column-gap. However, in order to support browsers that implemented grid-column-gap and not column-gap for grid, you will need to use the prefixed property.

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;
}

Result

Grid layout

HTML

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

CSS

#grid {
  grid-column-gap: 20px;
}

#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;
}

Result

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;
}

Result

Specifications

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

Browser compatibility

Support in Flex layout

	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 Full support 3 Prefixed Full support 3 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	WebView Android Full support 84	Chrome Android Full support 84	Firefox Android Full support 63	Opera Android No support No	Safari iOS Full support 2 Prefixed Full support 2 Prefixed Prefixed Implemented with the vendor prefix: -webkit-	Samsung Internet Android No support No

Legend

Full support: Full support
No support: No support
Requires a vendor prefix or different name for use.: Requires a vendor prefix or different name for use.

Support in Grid layout

	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-gap` Full support 29 Alternate Name Disabled Alternate Name Uses the non-standard name: `grid-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-gap`	Firefox Full support 61 Full support 61 Full support 52 Alternate Name Alternate Name Uses the non-standard name: `grid-gap` No support 40 — 59 Alternate Name Disabled Alternate Name Uses the non-standard name: `grid-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-gap` Full support 28 Alternate Name Disabled Alternate Name Uses the non-standard name: `grid-gap` Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari Full support 10.1 Alternate Name Full support 10.1 Alternate Name Alternate Name Uses the non-standard name: `grid-gap`	WebView Android Full support 66 Full support 66 Full support 57 Alternate Name Alternate Name Uses the non-standard name: `grid-gap`	Chrome Android Full support 66 Full support 66 Full support 57 Alternate Name Alternate Name Uses the non-standard name: `grid-gap` Full support 29 Alternate Name Disabled Alternate Name Uses the non-standard name: `grid-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-gap` No support 40 — 59 Alternate Name Disabled Alternate Name Uses the non-standard name: `grid-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-gap` Full support 28 Alternate Name Disabled Alternate Name Uses the non-standard name: `grid-gap` Disabled From version 28: this feature is behind the `Enable experimental Web Platform features` preference.	Safari iOS Full support 10.3 Alternate Name Full support 10.3 Alternate Name Alternate Name Uses the non-standard name: `grid-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-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

	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.

Syntax

Values

Formal definition

Formal syntax

Examples

Flex layout

HTML

CSS

Result

Grid layout

HTML

CSS

Result

Multi-column layout

HTML

CSS

Result

Specifications

Browser compatibility

Support in Flex layout

Legend

Support in Grid layout

Legend

Support in Multi-column layout

Legend

See also