row-gap (grid-row-gap)#

#Introduction

The row-gap/grid-row-gap CSS property sets the size of the gap (gutter) between an element's rows in flexible box layout and grid layout.

For compatibility, row-gap or grid-row-gap can be used both.

#Examples

css-apisrc/row-gap/App.tsx

Code

Preview

#Values

#<length>

<length> is the width of the gutter separating the rows.

#<percentage>

<percentage> values are relative to the dimension of the element.

#Formal syntax

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

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

#Syntax

/* <length> values */
row-gap: 20px;
row-gap: 1em;

/* <percentage> value */
row-gap: 10%;

/* calc() values */
row-gap: calc(10% + 20px);

#Formal definition

#Difference with the web

mdn: row-gap

1. normal is not supported.

#Compatibility

#FAQ