W3cubDocs

/CSS

grid-gap

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.

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:
Animation type as each of the properties of the shorthand:
Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

/* One <length> value */
grid-gap: 20px;
grid-gap: 1em;
grid-gap: 3vmin;
grid-gap: 0.5cm;

/* One <percentage> value */
grid-gap: 16%;
grid-gap: 100%;

/* Two <length> values */
grid-gap: 20px 10px;
grid-gap: 1em 0.5em;
grid-gap: 3vmin 2vmax;
grid-gap: 0.5cm 2mm;

/* One or two <percentage> values */
grid-gap: 16% 100%;
grid-gap: 21px 82%;

/* Global values */
grid-gap: inherit;
grid-gap: initial;
grid-gap: unset;

Values

<length>
Is the width of the gutter separating the grid lines.
<percentage>
Is the width of the gutter separating the grid lines, relative to the dimension of the element.

Formal syntax

<'grid-row-gap'> <'grid-column-gap'>?

Example

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;
}

Specifications

Specification Status Comment
CSS Grid Layout
The definition of 'grid-gap' in that specification.		 Candidate Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 57.0[1] No support[3] 52.0 (52.0)[2] No support[3] No support[4] Nightly build-webkit
<percentage> value 57.0 52.0 (52.0)[5] No support No support No support[4] ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? 52.0 (52.0)[3] ? ?
<percentage> value No support 52.0 (52.0)[5] No support No support No support

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0.

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), defaulting to false. Since Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) it is enabled by default.

[3] Internet Explorer implements an older version of the specification, which didn't define this property.

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

[5] Implemented behind the preference layout.css.grid.enabled since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), defaulting to false. Since Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) it is enabled by default.

See also

Edit this page on MDN

© 2005–2017 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/grid-gap