How can we add spacing between tracks (gutters)?

row-gap (grid-row-gap)

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

/* <length> values */
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/* <percentage> value */
row-gap: 10%;

/* Global values */
row-gap: inherit;
row-gap: initial;
row-gap: unset;

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap

column-gap (grid-column-gap)

The column-gap CSS property sets the size of the gap (gutter) between an element's columns.

/* Keyword value */
column-gap: normal;

/* <length> values */
column-gap: 3px;
column-gap: 2.5em;

/* <percentage> value */
column-gap: 3%;

/* Global values */
column-gap: inherit;
column-gap: initial;
column-gap: unset;

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap

gap (grid-gap)

The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gapand column-gap.

/* One <length> value */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* One <percentage> value */
gap: 16%;
gap: 100%;

/* Two <length> values (first row, then column) */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* One or two <percentage> values (first row, then column) */
gap: 16% 100%;
gap: 21px 82%;

/* calc() values (first row, then column) */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/* Global values */
gap: inherit;
gap: initial;
gap: unset;

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/gap

‼️

Important: these properties apply only to the grid container.