row-gap (grid-row-gap)

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

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 definition

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

Formal syntax

normal | <length-percentage>

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

Examples

Flex layout

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

Browser compatibility

Support in Flex layout

BCD tables only load in the browser

Support in Grid layout

BCD tables only load in the browser

See also