Easy Tutorial
❮ Css3 Pr Nav Index Pr Text Text Transform ❯

CSS grid-row-gap Property

Example

Set the gap between rows to 50px:

.grid-container {
  grid-row-gap: 50px;
}

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property Chrome Edge Firefox Safari Opera
grid-row-gap 57 16 52 10 44

Property Definition and Usage

The grid-row-gap property is used to set the gap between the rows of a grid.

Note: In CSS3, grid-row-gap has been renamed to row-gap.

Default value: 0 0
Inherited: no
--- ---
Animatable: Yes. Read about animatable Try it
--- ---
Version: CSS Grid Layout Module Level 1
--- ---
JavaScript syntax: object.style.gridRowGap="50px" Try it
--- ---

Syntax

grid-row-gap: length;
Value Description
length Sets the size of the gap using custom values, which can be in pixels (px) or percentages (%). The default value is 0. Read about length units

Related Articles

CSS Tutorial: CSS Grid Layout

CSS Reference: grid-gap Property

CSS Reference: grid-column-gap Property

❮ Css3 Pr Nav Index Pr Text Text Transform ❯