The CSS property that specifies spacing between grid tracks is `gap`.
In CSS Grid, `gap` is a shorthand that sets the gutters between both rows and columns. For example, `gap: 1rem;` applies the same spacing in both directions, while `gap: 1rem 2rem;` sets row spacing first and column spacing second. This makes it a convenient way to define the overall rhythm of a grid.
The property was originally associated with grid and flex layouts under the name `grid-gap`. The modern `gap` property generalizes the same idea across CSS Grid, Flexbox, and multi-column layouts. `row-gap` and `column-gap` remain useful when the two directions need different values.
A common misconception is that `gap` creates space around the outside edge of a container. It creates space between adjacent tracks, not an outer margin. Container padding controls the inside edge, while margins control space outside the container. Unlike margins on child elements, gaps also avoid margin-collapsing behavior between grid items.