gap en CSS : l'espacement qui a mis fin aux marges bricolées entre les éléments

Avant l'arrivée de gap, espacer régulièrement des éléments dans une liste demandait un bricolage classique : poser une margin sur chaque élément, puis annuler cette marge sur le premier ou le dernier pour éviter un espace superflu en bordure. gap règle ce problème d'un seul coup, sans sélecteur supplémentaire ni exception à gérer.

On la rencontre dès qu'il faut espacer des cartes, des boutons, des colonnes de grille ou des éléments de formulaire de façon régulière, sans qu'aucun espace ne déborde sur les bords du conteneur.

Définition

gap est la propriété qui définit l'espace entre les éléments d'un conteneur Flexbox ou d'un conteneur CSS Grid, sans jamais ajouter d'espace avant le premier élément ni après le dernier.

.conteneur {
  display: flex;
  gap: 1rem;
}

Chaque élément flexible reste espacé de ses voisins d'exactement un rem, sur toute la ligne, sans qu'une seule marge n'ait été posée sur les enfants eux-mêmes.

row-gap et column-gap

gap est en réalité un raccourci pour deux propriétés distinctes, utile quand l'espacement horizontal doit différer de l'espacement vertical.

.grille {
  display: grid;
  row-gap: 2rem;
  column-gap: 1rem;
}

/* équivalent en une ligne */
.grille {
  display: grid;
  gap: 2rem 1rem;
}

Si une seule valeur est donnée à gap, elle s'applique aux deux directions à la fois, ce qui couvre la majorité des cas d'usage courants.

Pourquoi c'est arrivé après des années de bidouilles margin

Sur Flexbox, gap est arrivé plusieurs années après les autres propriétés d'alignement, ce qui explique pourquoi tant de code plus ancien continue de gérer l'espacement avec des marges et des sélecteurs comme :not(:last-child). Avant gap, une ligne de cartes espacées demandait ce genre d'écriture.

.carte:not(:last-child) {
  margin-right: 1rem;
}

Cette technique fonctionne, mais elle casse dès que flex-wrap entre en jeu : la marge à droite du dernier élément de chaque ligne intermédiaire crée un espace irrégulier, que gap élimine simplement en gérant les deux dimensions à la fois, ligne par ligne et colonne par colonne.

Un exemple concret

Une grille de photos avec un espacement homogène illustre bien la simplicité apportée par gap, comparée à l'approche par marges.

.grille-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Chaque photo reste espacée de ses voisines d'un rem, dans les deux directions, sans qu'un seul sélecteur d'exception ne soit nécessaire pour gérer les bords de la grille.

Le piège du support navigateur

gap a longtemps été réservé à CSS Grid avant de devenir disponible sur Flexbox, ce qui explique pourquoi certains projets plus anciens continuent d'utiliser des marges sur des conteneurs flex par prudence.

Questions fréquentes

Non, gap n'a d'effet que sur les éléments qui participent réellement au flux du conteneur flex ou grid. Un élément positionné en absolute est retiré de ce flux normal, et gap l'ignore complètement, qu'il soit placé au début, au milieu ou à la fin des enfants du conteneur.

Oui, un pourcentage dans gap se calcule par rapport à la taille du conteneur, ce qui permet un espacement qui s'agrandit ou se réduit proportionnellement avec la largeur disponible, plutôt qu'un espacement fixe en pixels ou en rem qui resterait identique quelle que soit la taille de l'écran.

gap n'ajoute jamais d'espace en dehors du groupe d'éléments, seulement entre eux, alors qu'une margin posée sur chaque enfant ajoute aussi un espace sur les bords extérieurs du groupe, sauf à annuler manuellement cette marge sur le premier et le dernier élément. gap évite précisément ce calcul.