This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
Summary
The grid-column-gap CSS property specifies the gutter between grid columns.
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 | yes, as the dimension of the element |
| 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
/* <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;
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 | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 29.0[1] | 40.0 (40.0)[2] | No support[3] | No support[3] | 28.0[1] | Nightly build-webkit |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | No support | No support | No support[3] | No support | No support |
[1] Implemented behind the experimental Web Platform features flag in chrome://flags.
[2] Implemented behind the preference layout.css.grid.enabled, defaulting to false.
[3] Internet Explorer implements an older version of the specification, which didn't define this property.
See also
- Related CSS properties:
grid-row-gap,grid-gap