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 as in the second interactive example above.

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 syntax

normal | <length-percentage>

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

Examples

Flex layout

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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 {
  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

Initial valuenormal
Applies tomulti-column elements, flex containers, grid containers
Inheritedno
Percentagesrefer to corresponding dimension of the content area
Mediavisual
Computed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typea length, percentage or calc();
Canonical orderper grammar

Browser compatibility

Support in Flex layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome ? Edge ? Firefox Full support 63IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 63Opera Android ? Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

Support in Grid layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome 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
Full support 40
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 40: 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 NoOpera 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
Full support 4.4
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 4.4: this feature is behind the Enable experimental Web Platform features preference.
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.
Edge Mobile No support NoFirefox Android Full support 61
Full support 61
Full support 52
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
Full support 40
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-gap
Disabled From version 40: 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 53
Full support 53
Full support 44
Alternate Name
Alternate Name Uses the non-standard name: grid-gap
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 6.0
Alternate Name
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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 50
Full support 50
Full support Yes
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
Full support 1.5
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 10Opera 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 Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 50
Full support 50
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile No support NoFirefox 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 15
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 Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
<percentage> values
Experimental
Chrome Full support 66Edge Full support 16Firefox Full support 61IE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Edge Mobile No support NoFirefox Android Full support 61Opera Android Full support 53Safari iOS No support NoSamsung Internet Android No support No
calc() values
Experimental
Chrome Full support 66Edge Full support 16Firefox Full support 61IE No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Edge Mobile No support NoFirefox Android Full support 61Opera Android Full support 53Safari iOS No support NoSamsung 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.

See also