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.