/* <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

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

Formal definition

Formal syntax

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

Examples

Flex layout

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

#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

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

#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

See also

Last modified: Sep 15, 2021, by MDN contributors