CSS `grid-gap` Property

Example

Set the gap between rows and columns to 50px:

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

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

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

The grid-gap property is used to set the gaps (gutters) between rows and columns in a grid layout.

Note: grid-gap is a shorthand property for row-gap and column-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.gridGap="50px 100px" Try it
---	---

grid-gap: grid-row-gap grid-column-gap;

Value	Description
grid-row-gap	Sets the size of the gap between grid rows. The default value is 0.
grid-column-gap	Sets the size of the gap between grid columns. The default value is 0.

The following example sets the gap between grid rows to 20px and columns to 50px:

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

CSS Reference: grid-row-gap Property

CSS Reference: grid-column-gap Property