grid-row-gap

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.

Syntax

/* <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;

Values

<length-percentage>
Is the width of the gutter separating the grid rows. <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: 200px;
  grid-template-columns: 200px;
  grid-template-rows: repeat(3, 1fr);
  grid-row-gap: 20px;
}

#grid > div {
  background-color: lime;
}

Specifications

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

Initial value0
Applies togrid containers
Inheritedno
Percentagesrefer to corresponding dimension of the content area
Mediavisual
Computed valuethe percentage as specified or the absolute length
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

57

291

16

52

402

No

44

283

10.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support57

57

291

16

52

402

4410.36.0

1. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

2. From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Enable experimental Web Platform features preference.

 

See also

Document Tags and Contributors

 Last updated by: wbamberg,