Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

grid-gap

This article needs a technical review. How you can help.

Our volunteers haven't translated this article into Türkçe yet. Join us and help get the job done!

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-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 valueas each of the properties of the shorthand:
Applies togrid containers
Inheritedno
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderthe 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 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
<percentage> value No support 49.0 (49.0) No support No support No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support No support[3] No support No support
<percentage> value No support 49.0 (49.0) No support 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

Document Tags and Contributors

 Contributors to this page: teoli, yisibl, rolfedh, Sebastianz
 Last updated by: teoli,