grid-row-gap property sets the spacing between rows (row spacing), and the grid-column-gap property sets the spacing between columns (column spacing).

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

In the above code, grid-row-gap is used to set the row spacing and grid-column-gap to set the column spacing.

grid-gap attribute is a combined shorthand for grid-column-gap and grid-row-gap

grid-gap: <grid-row-gap> <grid-column-gap>;

Therefore, the above CSS code is equivalent to the following code.

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

If grid-gapthe second value is omitted, the browser considers the second value equal to the first value.