CSS grid-row-gap Property

CSS grid-row-gap property specifies the gap between the rows in the grid layout.

By default, there is no gap between the rows.

The row gap can be specified in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It also accept a percentage(%) value.

In the example below, we have set a gap of 40px between the grid rows. Try it out to see how it works:

Example:

.grid-container{
  display: grid;
  grid-row-gap: 40px;
}

Set a gap of 3rem between the grid rows:

Example:

.grid-container{
  display: grid;
  grid-row-gap: 3rem;
}

CSS Syntax

The grid-row-gap property has the following syntax:

grid-row-gap: length|initial|inherit;

Property Values

The grid-row-gap property accepts the following values:

lengthSpecifies the gap between the grid rows in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. It also accepts a percentage(%) value. The default value is 0.
initialSets the grid-row-gap property to its default value(0).
inheritInherits the grid-row-gap property from the parent element.

General Info

Default Value0
InheritedNo
JavaScript Usageelement.style.gridRowGap = “40px”