row-gap

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.

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

Early versions of the specification called this property grid-row-gap, and to maintain compatibility with legacy websites, browsers will still accept grid-row-gap as an alias for row-gap.

Try it

row-gap: 0; 
row-gap: 1ch; 
row-gap: 1em; 
row-gap: 20px; 
<section class="default-example" id="default-example"> <div class="example-container"> <div class="transition-all" id="example-element"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> </div> </section> 
#example-element { border: 1px solid #c5c5c5; display: grid; grid-template-columns: 1fr 1fr; width: 200px; } #example-element > div { background-color: rgb(0 0 255 / 0.2); border: 3px solid blue; }

Syntax

css
/* <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: revert-layer; 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

row-gap = 
 normal |
 <length-percentage [0,∞]> 

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

Examples

Flex layout

HTML

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

CSS

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

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

CSS

css
#grid { display: grid; height: 200px; grid-template-columns: 150px 1fr; 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

Browser compatibility

See also