The row-gap CSS property sets the size of the gap (gutter) between an element's grid rows.

CSS Grid Layout initially defined the grid-row-gap property. This prefixed property is being replaced by row-gap. However, in order to support browsers that implemented grid-row-gap and not row-gap for grid, you will need to use the prefixed property as in the interactive example above.

Syntax

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

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

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

Values

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

Formal syntax

normal | <length-percentage>

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

Examples

Flex layout

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

HTML

<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  row-gap: 20px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}

Result

Grid layout

HTML

<div id="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

CSS

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

#grid > div {
  border: 1px solid green;
  background-color: lime;
}

Result

Specifications

Specification Status Comment
CSS Box Alignment Module Level 3
The definition of 'row-gap' in that specification.
Working Draft Initial definition

Initial valuenormal
Applies tomulti-column elements, flex containers, grid containers
Inheritedno
Percentagesrefer to corresponding dimension of the content area
Mediavisual
Computed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation typea length, percentage or calc();
Canonical orderper grammar

Browser compatibility

Support in Flex layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome ? Edge ? Firefox Full support 63IE No support NoOpera ? Safari No support NoWebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 63Opera Android ? Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

Support in Grid layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Full support 29
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-row-gap
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Full support 16
Full support 16
Full support 16
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Firefox Full support 61
Full support 61
Full support 52
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Full support 40
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-row-gap
Disabled 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.
IE No support NoOpera Full support 53
Full support 53
Full support 44
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Full support 28
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-row-gap
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Full support 10.1
Alternate Name
Full support 10.1
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
WebView Android Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Chrome Android Full support 66
Full support 66
Full support 57
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Full support 29
Disabled
Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile No support NoFirefox Android Full support 61
Full support 61
Full support 52
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Full support 40
Alternate Name Disabled
Alternate Name Uses the non-standard name: grid-row-gap
Disabled 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.
Opera Android Full support 53
Full support 53
Full support 44
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Safari iOS Full support 10.3
Alternate Name
Full support 10.3
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap
Samsung Internet Android Full support 6.0
Alternate Name
Full support 6.0
Alternate Name
Alternate Name Uses the non-standard name: grid-row-gap

Legend

Full support  
Full support
No support  
No support
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.

See also

Document Tags and Contributors

Contributors to this page: ddbeck, ExE-Boss, rachelandrew, mfluehr
Last updated by: ddbeck,