W3cubDocs

/CSS

grid-row-gap

The row-gap CSS property sets the size of the gap (gutter) between an element's 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 value normal
Applies to multi-column elements, flex containers, grid containers
Inherited no
Percentages refer to corresponding dimension of the content area
Media visual
Computed value as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
Animation type a length, percentage or calc();
Canonical order per grammar

Browser compatibilityUpdate compatibility data on GitHubUpdate compatibility data on GitHub

Support in Flex layout

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support ? ? 63 No ? No
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support ? ? No 63 ? No ?

Support in Grid layout

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 66
66
57
Uses the non-standard name: grid-row-gap
29
Disabled
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.
 16
16
16
Uses the non-standard name: grid-row-gap
61
61
52
Uses the non-standard name: grid-row-gap
40
Disabled
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.
 No 53
53
44
Uses the non-standard name: grid-row-gap
28
Disabled
Uses the non-standard name: grid-row-gap
Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.
 10.1
10.1
Uses the non-standard name: grid-row-gap
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 66
66
57
Uses the non-standard name: grid-row-gap
66
66
57
Uses the non-standard name: grid-row-gap
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.
 No 61
61
52
Uses the non-standard name: grid-row-gap
40
Disabled
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.
 53
53
44
Uses the non-standard name: grid-row-gap
10.3
10.3
Uses the non-standard name: grid-row-gap
6.0
6.0
Uses the non-standard name: grid-row-gap

See also

Edit this page on MDN

© 2005–2018 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-row-gap