Retour au cours

Lesson 71: Grid Gaps (Spacing Between Tracks)

**La Maîtrise de CSS : De zéro à expert en 100 leçons** *(Alternative, slightly punchier version using a common French idiomatic structure for full coverage: CSS : Maîtrisez l'essentiel en 100 leçons, but the first option is closer to the original progression.)*

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.