This article needs a technical review. How you can help.
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.
SummaryEdit
The grid-gap CSS property is a shorthand property for grid-row-gap and grid-column-gap specifying the gutters between grid rows and columns.
If <'grid-column-gap'> is omitted, it’s set to the same value as <'grid-row-gap'>.
| Initial value | as each of the properties of the shorthand: |
|---|---|
| Applies to | grid containers |
| Inherited | no |
| Media | visual |
| Computed value | as each of the properties of the shorthand:
|
| Animatable | as each of the properties of the shorthand:
|
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
SyntaxEdit
/* One <length> value */
grid-gap: 20px;
grid-gap: 1em;
grid-gap: 3vmin;
grid-gap: 0.5cm;
/* Two <length> values */
grid-gap: 20px 10px;
grid-gap: 1em 0.5em;
grid-gap: 3vmin 2vmax;
grid-gap: 0.5cm 2mm;
/* Global values */
grid-gap: inherit;
grid-gap: initial;
grid-gap: unset;Values
<length>- Is the width of the gutter separating the grid lines.
Formal syntax
How to read CSS syntax.<'grid-row-gap'> <'grid-column-gap'>?
ExampleEdit
HTML Content
<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>CSS Content
#grid {
display: grid;
height: 200px;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
grid-gap: 20px 5px;
}
#grid > div {
background-color: lime;
}
SpecificationsEdit
| Specification | Status | Comment |
|---|---|---|
| CSS Grid Layout The definition of 'grid-gap' in that specification. |
Working Draft | Initial definition |
Browser compatibilityEdit
| 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 |
[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 alsoEdit
- Related CSS properties:
grid-row-gap,grid-column-gap