CSS row-gap property

Definition and usage

The row-gap property specifies the gap between rows in a flexible or grid layout.

The row-gap property was previously known as grid-row-gap.

See also:

CSS Tutorial:CSS Grid Layout

CSS Tutorial:CSS Flexible Box Layout

CSS Reference Manual:gap property

CSS Reference Manual:column-gap property

Instance

Example 1

Specifies a 50-pixel gap between grid rows:

#grid-container {
  display: grid;
  row-gap: 50px;
}

Try it yourself

Example 2: Flexible box layout

Sets the line spacing to 70px in the flexible box layout:

#flex-container {
  display: flex;
  row-gap: 70px;
}

Try it yourself

CSS syntax

row-gap: length|normal|initial|inherit;
Value Description
length Sets the specified length or percentage value for the space between lines.
normal Default value. Specifies the normal space between lines.
initial Sets this property to its default value. See also initial.
inherit Inherits this property from its parent element. See also inherit.

Technical details

Default value: normal
Inheritance: No
Animation creation: Supported. Please see the individual properties. See also:Animation-related properties.
Version: CSS Box Alignment Module Level 3
JavaScript syntax: object.style.rowGap="50px"

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

layout Chrome IE / Edge Firefox Safari Opera
in the grid 66 16 61 12 53
in the flexible box 84 84 63 14.1 70