W3cubDocs

/CSS

column-gap

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 value normal
Applies to multi-column elements, flex containers, grid containers
Inherited no
Percentages refer to corresponding dimension of the content area
Media visual
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();
Canonical order per grammar

Browser compatibilityUpdate compatibility data on GitHubUpdate compatibility data on GitHubUpdate compatibility data on GitHub

Support in Flex layout

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support ? ? 63 No ? No
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support ? ? No 63 ? No ?

Support in Grid layout

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 66
66
57
Uses the non-standard name: grid-gap
29
Disabled
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.
 16
16
16
Uses the non-standard name: grid-gap
61
61
52
Uses the non-standard name: grid-gap
40
Disabled
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.
 No 53
53
44
Uses the non-standard name: grid-gap
28
Disabled
Uses the non-standard name: grid-gap
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
 10.1
10.1
Uses the non-standard name: grid-gap
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 66
66
57
Uses the non-standard name: grid-gap
4.4
Disabled
Uses the non-standard name: grid-gap
Disabled From version 4.4: this feature is behind the Enable experimental Web Platform features preference.
 66
66
57
Uses the non-standard name: grid-gap
29
Disabled
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.
 No 61
61
52
Uses the non-standard name: grid-gap
40
Disabled
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.
 53
53
44
Uses the non-standard name: grid-gap
10.3
10.3
Uses the non-standard name: grid-gap
6.0
6.0
Uses the non-standard name: grid-gap

Support in Multi-column layout

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 50
50
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 12
12
12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 52
52
1.5
Prefixed
Prefixed Requires the vendor prefix: -moz-
Before Firefox 3, the default value for the normal keyword was 0 and not 1em.
 10 37
37
15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
11.1 — 15
10
10
3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
<percentage> values 66 16 61 No 53 No
calc() values 66 16 61 No 53 No
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 50
50
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 50
50
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 No 52
52
4
Prefixed
Prefixed Requires the vendor prefix: -moz-
 37
37
15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
11.1 — 14
10
10
3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
 5.0
5.0
Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
<percentage> values 66 66 No 61 53 No No
calc() values 66 66 No 61 53 No No

Legend

Full support
No support
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

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap