grid-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.
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.
| 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(); |
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 { 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 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 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 |
| Supported in Flex Layout | 84 | 84 | 63 | No | 70 | No |
| Mobile |
| Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet |
| Supported in Flex Layout | 84 | 84 | 63 | No | No | No |
Support in Grid layout
| Desktop |
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| Supported in Grid Layout | 66 66 57 Uses the non-standard name: grid-column-gap 29 Disabled 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. | 16 16 16 Uses the non-standard name: grid-column-gap | 61 61 52 Uses the non-standard name: grid-column-gap 40 — 59 Disabled 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. | No | 53 53 44 Uses the non-standard name: grid-column-gap 28 Disabled Uses the non-standard name: grid-column-gap Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference. | 12.1 12.1 10.1 Uses the non-standard name: grid-column-gap |
| Mobile |
| Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet |
| Supported in Grid Layout | 66 66 57 Uses the non-standard name: grid-column-gap | 66 66 57 Uses the non-standard name: grid-column-gap 29 Disabled 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. | 61 61 52 Uses the non-standard name: grid-column-gap 40 — 59 Disabled 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. | 47 47 43 Uses the non-standard name: grid-column-gap 28 Disabled Uses the non-standard name: grid-column-gap Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference. | 12 12 10.3 Uses the non-standard name: grid-column-gap | 9.0 9.0 6.0 Uses the non-standard name: grid-column-gap |
Support in Multi-column layout
| Desktop |
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
| Supported in Multi-column Layout | 50 50 1Prefixed Prefixed Implemented with the vendor prefix: -webkit- | 12 12 12Prefixed Prefixed Implemented with the vendor prefix: -webkit- | 52 52 1.5 — 74Prefixed Prefixed Implemented with the vendor prefix: -moz- Before Firefox 3, the default value for the normal keyword was 0 and not 1em. | 10 | 37 37 15Prefixed Prefixed Implemented with the vendor prefix: -webkit- 11.1 — 15 | 10 10 3Prefixed Prefixed Implemented with the vendor prefix: -webkit- |
| calc() values | 66 | 16 | 61 | No | 53 | No |
| <percentage> values | 66 | 16 | 61 | No | 53 | No |
| Mobile |
| Android webview | Chrome for Android | Firefox for Android | Opera for Android | Safari on iOS | Samsung Internet |
| Supported in Multi-column Layout | 50 50 ≤37Prefixed Prefixed Implemented with the vendor prefix: -webkit- | 50 50 18Prefixed Prefixed Implemented with the vendor prefix: -webkit- | 52 52 4Prefixed Prefixed Implemented with the vendor prefix: -moz- | 37 37 14Prefixed Prefixed Implemented with the vendor prefix: -webkit- 11.1 — 14 | 10 10 3Prefixed Prefixed Implemented with the vendor prefix: -webkit- | 5.0 5.0 1.0Prefixed Prefixed Implemented with the vendor prefix: -webkit- |
| calc() values | 66 | 66 | 61 | 47 | No | 9.0 |
| <percentage> values | 66 | 66 | 61 | 47 | No | 9.0 |
Legend
Full 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
Edit this page on MDN
© 2005–2020 Mozilla and individual contributors.Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap