The grid-row-gap CSS property specifies the gutter between grid rows.

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 value0
Applies togrid containers
Percentagesyes, as the dimension of the element
Computed valuethe percentage as specified or the absolute length
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar


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

/* <percentage> value */
grid-row-gap: 10%;

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


Is the width of the gutter separating the grid rows. <percentage> values are relative to the dimension of the element.

Formal syntax


<length-percentage> = <length> | <percentage>


HTML Content

<div id="grid">

CSS Content

#grid {
  display: grid;
  height: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 20px;

#grid > div {
  background-color: lime;


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

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 57.0[1] 20 (12.10240)-ms[3] 52.0 (52.0)[2] 10.0-ms[3] 44[4] No support[5]
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 57.0[1] 57.0[1] 52.0 (52.0)[2] No support[3] 44[4] No support[5]

[1] Implemented behind the experimental Web Platform features flag in chrome://flags since Chrome 29.0. Since Chrome 57.0 it is enabled by default.

[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] Experimental implementation available in Safari Technological Preview.

See also

Document Tags and Contributors

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