In this section, we will learn what the grid-row-gap property is and how to use it in CSS.

Click here to run the example of grid-row-gap property.

CSS grid-row-gap Property Definition and Usage

When we create a grid in a page, by default, each row sits next to its neighbor row without any gap in between. But this is the default behavior, and like many other features, this one is also changeable.

Basically, with the help of CSS `grid-row-gap` property, we can set a gap between each row of a grid if needed.

CSS grid-row-gap Property Syntax

grid-row-gap: length;

CSS grid-row-gap Property Value

The value we set for this property could be any number with relative or absolute units supported in CSS.

Example: grid-row-gap property in CSS

See the Pen grid-row-gap property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.

How Does CSS grid-row-gap Property Work?

As you can see, in this example, the value of the `grid-row-gap` property is set to 20px. This means, now between each row in the grid, there’s a gap of 20px.