CSS Grid Spacing

The row-gap and column-gap properties (and their gap shorthand), when specified on a grid container, define the gutters between grid rows and grid columns.

The effect of these properties is as though the affected grid lines acquired thickness: the grid track between two grid lines is the space between the gutters that represent them.

For the purpose of track sizing, each gutter is treated as an extra, empty track of the specified size.

Note - Additional spacing may be added between tracks due to justify-content/align-content.

If a grid is fragmented between tracks, the gutter spacing between those tracks must be suppressed.

Note - Gutters are suppressed even after forced breaks, unlike margins.

When a collapsed track’s gutters collapse, they coincide exactly—the two gutters overlap so that their start and end edges coincide.

row-gap

The row-gap property sets the size of the gap (gutter) between an element's rows.

row-gap: normal|length|%(percentage);

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto auto auto;
  row-gap: 50px
}

column-gap

The column-gap property defines the gap between columns in a multicolumn text flow.

column-gap: normal|length|%(percentage);

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto auto auto;
  column-gap: 50px
}

gap

column-gap: normal|length|%(percentage);

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: auto auto auto;
  gap: 50px
}

All CSS Grid Spacing Properties