71. Grid Gaps (Spacing Between Tracks)

Similar to Flexbox, CSS Grid uses the gap properties to define spacing between grid tracks (columns and rows), eliminating the need for complex margin calculations on grid items.

The Gap Properties

1. column-gap: Space between columns (vertical lines).
2. row-gap: Space between rows (horizontal lines).
3. gap (Shorthand): Sets both row-gap and column-gap.

Example

css .grid-container { display: grid; grid-template-columns: repeat(3, 1fr);

/* 1. Setting individual gaps */ row-gap: 20px; column-gap: 15px;

/* 2. Shorthand (preferred for equal spacing) / / gap: 20px; */

/* 3. Shorthand (Row, Column) / / gap: 20px 15px; */ }

Key Advantage: Unlike margins, gap spacing is always internal to the container and never leaks outside or causes margin collapse, making spacing highly predictable.