Propriété CSS grid-column-gap

La propriété grid-column-gap définit la taille de la gouttière (l'espace vide) entre les colonnes d'une mise en page CSS Grid. Elle contrôle uniquement l'espacement horizontal entre les pistes de colonnes — elle n'ajoute jamais d'espace sur les bords extérieurs du conteneur de grille.

La valeur peut être une longueur fixe (comme px, rem ou em) ou un pourcentage. Lorsqu'un pourcentage est utilisé, il est résolu par rapport à la taille en ligne (la largeur) du conteneur de grille.

Avertissement

grid-column-gap est dépréciée. C'était un nom ancien, propre à la grille, que les navigateurs ont depuis renommé. Dans le nouveau code, utilisez la propriété moderne column-gap, ou le raccourci gap pour définir simultanément les gouttières de ligne et de colonne. Tous les navigateurs actuels acceptent encore grid-column-gap comme alias de column-gap, donc les mises en page existantes continuent de fonctionner — mais il n'y a aucune raison de l'écrire dans de nouvelles feuilles de style.

Pourquoi une gouttière plutôt que des marges ?

Avant l'existence des propriétés de gouttière, les auteurs créaient de l'espacement entre les éléments de grille avec margin, puis devaient annuler la marge excédentaire qui débordait sur les premier et dernier éléments. grid-column-gap résout ce problème proprement : la gouttière apparaît uniquement entre les pistes de colonnes, de sorte que la grille reste alignée avec son conteneur des deux côtés. Le navigateur maintient également la gouttière cohérente à mesure que les pistes grandissent ou rétrécissent, ce que les marges ne peuvent pas garantir.

Référence de la propriété

Propriété	Valeur
Valeur initiale	`normal` (équivalent à `0` dans une grille)
S'applique à	Les conteneurs Grid
Héritée	Non
Animable	Oui
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	`object.style.gridColumnGap = "30px"`

Syntaxe

grid-column-gap: <length-percentage> | normal | initial | inherit;

<length-percentage> — une valeur non négative en px, em, rem, ch, vw ou %. Les valeurs négatives sont invalides.
normal — la valeur par défaut du navigateur, qui est résolue à 0 dans un contexte de grille.
initial — réinitialise la propriété à sa valeur initiale (normal).
inherit — hérite de la valeur calculée de l'élément parent (rarement utile car grid-column-gap n'est pas héritable).

Exemples

Gouttière en longueur fixe (px)

Le cas le plus courant : une gouttière en pixels fixe qui reste de la même taille quelle que soit la largeur du conteneur.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-column-gap: 30px;
        grid-row-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
      <div>10</div>
      <div>11</div>
      <div>12</div>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

Les douze éléments se répartissent en quatre colonnes ; chaque colonne est séparée de la suivante par 30px, tandis que grid-row-gap: 10px maintient l'espacement entre les lignes.

Gouttière en pourcentage (%)

Une valeur en pourcentage est résolue par rapport à la taille en ligne (largeur) du conteneur de grille. Les gouttières grandissent et rétrécissent à mesure que le conteneur est redimensionné.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-column-gap: 20%;
        grid-row-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column-gap property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Essayez vous-même »

Les gouttières en pourcentage sont rarement ce que vous souhaitez : avec trois gouttières à 20% chacune, les gouttières seules consomment 60% du conteneur — ne laissant que 40% pour quatre pistes de colonnes auto. Les longueurs fixes (px, rem, em) offrent des gouttières bien plus prévisibles.

Migration vers la syntaxe moderne

Le remplacement est un simple renommage — la valeur est identique, seul le nom de la propriété change :

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

  /* Deprecated — avoid in new code */
  grid-column-gap: 30px;

  /* Modern equivalent */
  column-gap: 30px;

  /* Or set both axes at once with the gap shorthand */
  /* gap: <row-gap> <column-gap>; */
  gap: 10px 30px;
}

gap: 10px 30px est équivalent à row-gap: 10px; column-gap: 30px;. Passer une seule valeur — gap: 30px — l'applique à la fois aux lignes et aux colonnes. Le raccourci gap fonctionne également dans les conteneurs Flexbox, ce qui en fait le choix le plus polyvalent.

Interaction des gouttières avec les unités fr

Lorsque vous combinez une gouttière avec des colonnes fr, le navigateur soustrait tout l'espace de gouttière de la largeur disponible avant de distribuer les parts fr. Cela signifie que les gouttières n'affectent jamais le ratio entre les pistes :

.grid {
  display: grid;
  /* Three equal columns; gaps come out of available space first */
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px; /* modern equivalent of grid-column-gap: 24px */
}

Si le conteneur a une largeur de 300px et qu'il y a deux gouttières de 24px chacune, les 252px restants sont répartis équitablement : chaque colonne mesure 84px. C'est l'une des raisons pour lesquelles les pistes fr associées à un column-gap fixe (ou grid-column-gap) produisent des mises en page plus prévisibles que les gouttières en pourcentage.

Valeurs

Valeur	Description
`<length>`	Une gouttière fixe en `px`, `em`, `rem`, etc. Les valeurs négatives ne sont pas autorisées.
`<percentage>`	Un pourcentage de la taille en ligne (largeur) du conteneur de grille.
`normal`	La valeur par défaut du navigateur, qui équivaut à `0` dans une grille.
`initial`	Réinitialise à la valeur initiale (`normal`).
`inherit`	Utilise la valeur calculée de l'élément parent.

Exercice

Pratique

Quel est le rôle de la propriété 'column-gap' dans la mise en page CSS Grid ?

Elle définit la taille de l'espace entre les colonnes.Elle définit la taille de l'espace entre les lignes.Elle détermine la couleur des lignes de grille.Avant l'introduction de la propriété 'gap', 'column-gap' était utilisée pour créer des espacements.Elle aligne les éléments de grille le long de l'axe des colonnes.

Propriétés associées

column-gap — le remplacement moderne de cette propriété.
gap — raccourci pour définir simultanément les gouttières de ligne et de colonne.
grid-row-gap — la propriété correspondante pour les gouttières verticales entre les lignes.
grid-template-columns — définit les pistes de colonnes entre lesquelles se trouvent les gouttières.
grid-template-rows — définit les pistes de lignes sur lesquelles agit grid-row-gap.
grid — le raccourci qui transforme un élément en conteneur de grille.