Web/CSS/row-gap

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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 value	normal
Applies to	multi-column elements, flex containers, grid containers
Inherited	no
Percentages	refer to corresponding dimension of the content area
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();

Formal syntax

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

Examples

Flex layout

This is an experimental technologyCheck 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;
}

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;
}

Specifications

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

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Support in Flex layout

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Supported in Flex Layout	Chrome Full support 84	Edge Full support 84	Firefox Full support 63	IE No support No	Opera Full support 70	Safari No support No	WebView Android Full support 84	Chrome Android Full support 84	Firefox Android Full support 63	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No

Legend

Full support  

Full support

No support  

No support

Support in Grid layout

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Supported in Grid Layout	Chrome 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 No support 40 — 59 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: grid-row-gap Disabled' From version 40 until version 59 (exclusive): 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 No	Opera 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 12.1 Full support 12.1 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.	Firefox Android Full support 61 Full support 61 Full support 52 Alternate Name' Alternate Name' Uses the non-standard name: grid-row-gap No support 40 — 59 Alternate Name' Disabled' Alternate Name' Uses the non-standard name: grid-row-gap Disabled' From version 40 until version 59 (exclusive): 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 47 Full support 47 Full support 43 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 iOS Full support 12 Full support 12 Full support 10.3 Alternate Name' Alternate Name' Uses the non-standard name: grid-row-gap	Samsung Internet Android Full support 9.0 Full support 9.0 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

• Related CSS properties: column-gap, gap
• Grid Layout Guide: Basic concepts of grid layout - Gutters

row-gap (grid-row-gap) by Mozilla Contributors is licensed under CC-BY-SA 2.5.