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

/* <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: revert; row-gap: unset; 

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: revert; 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

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
CSS Box Alignment Module Level 3 # column-row-gap

See also

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

Last modified: Sep 15, 2021, by MDN contributors

Select your preferred language English (US)DeutschFrançais日本語Русский中文 (简体) Change language