The grid-column-gap
CSS property specifies the gutter between grid columns.
/* <length> values */ grid-column-gap: 20px; grid-column-gap: 1em; grid-column-gap: 3vmin; grid-column-gap: 0.5cm; /* <percentage> value */ grid-column-gap: 10%; /* Global values */ grid-column-gap: inherit; grid-column-gap: initial; grid-column-gap: unset;
The effect is as though the affected grid lines acquired width: the grid track between two grid lines is the space between the gutters that represent them. For the purpose of track sizing, each gutter is essentially treated as an extra track of the specified length. Negative values are invalid.
Initial value | 0 |
---|---|
Applies to | grid containers |
Inherited | no |
Percentages | refer to corresponding dimension of the content area |
Media | visual |
Computed value | the percentage as specified or the absolute length |
Animation type | a length |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
Values
<length-percentage>
- Is the width of the gutter separating the grid columns.
<percentage>
values are relative to the dimension of the element.
Formal syntax
<length-percentage>where
<length-percentage> = <length> | <percentage>
Example
HTML Content
<div id="grid"> <div></div> <div></div> <div></div> </div>
CSS Content
#grid { display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; grid-column-gap: 20px; } #grid > div { background-color: lime; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Grid Layout The definition of 'grid-column-gap' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 57 292 | 16 | 52 403 | No | 44 284 | 10.1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 57 291 | 57 292 | 16 | 52 403 | No | 44 | 10.3 |
1. From version 29: this feature is behind the Enable experimental Web Platform features
preference.
2. From version 29: this feature is behind the Enable experimental Web Platform features
preference. To change preferences in Chrome, visit chrome://flags.
3. 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.
4. From version 28: this feature is behind the Enable experimental Web Platform features
preference.
See also
- Related CSS properties:
grid-row-gap
,grid-gap
- Grid Layout Guide: Basic concepts of grid layout - Gutters