Propriété CSS grid-gap

La propriété grid-gap définit la taille de l'espace (gouttière) entre les lignes et les colonnes d'une mise en page grid. L'espace est le vide entre les pistes de la grille uniquement — il n'ajoute jamais d'espace sur les bords extérieurs de la grille, donc le rembourrage du conteneur contrôle toujours la marge extérieure.

grid-gap est une propriété raccourcie pour deux propriétés longues :

grid-row-gap — la taille de l'espace entre les lignes.
grid-column-gap — la taille de l'espace entre les colonnes.

grid-gap vs. gap

La propriété standard gap a remplacé grid-gap. Les deux se comportent de manière identique dans un conteneur de grille, mais grid-gap est désormais considéré comme hérité : il existe principalement pour les navigateurs plus anciens qui ont intégré la version préfixée avant que gap sans préfixe soit standardisé. Les navigateurs modernes prennent toujours en charge grid-gap comme alias, ce qui permet aux feuilles de style existantes de continuer à fonctionner.

Pour les nouveaux projets, préférez gap — il fonctionne dans les mises en page grid et flexbox, tandis que grid-gap ne s'appliquait qu'aux grilles :

/* Legacy (grid only) */
.grid { display: grid; grid-gap: 20px 40px; }

/* Modern, preferred */
.grid { display: grid; gap: 20px 40px; }

Valeur initiale	0
S'applique à	Les conteneurs de grille.
Hérité	Non.
Animatable	Oui. `grid-gap` est animatable.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	`object.style.gridGap = "30px 70px";`

Syntaxe

Propriété CSS grid-gap

grid-gap: <row-gap> <column-gap>;

La propriété accepte une ou deux valeurs de longueur :

Une valeur définit la même taille pour l'espace entre les lignes et entre les colonnes.
Deux valeurs définissent d'abord l'espace entre les lignes, puis l'espace entre les colonnes (grid-gap: 20px 40px; signifie un espace de 20px entre les lignes et un espace de 40px entre les colonnes).

Chaque valeur peut être n'importe quelle longueur non négative (px, em, rem, etc.) ou un pourcentage. Les mots-clés initial et inherit sont également valides.

Exemple de la propriété grid-gap :

Exemple d'un conteneur de grille avec la propriété grid-gap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 60px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-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

![Propriété CSS grid-gap](/uploads/media/default/0001/04/91075707603fef2480969077540f999b813f30aa.png "Grille avec un espace de 60px entre chaque ligne et colonne" =420x)

Exemple de la propriété grid-gap spécifiée en pourcentages :

Un espace en pourcentage est calculé par rapport aux dimensions propres du conteneur de grille — l'espace entre les colonnes est un pourcentage de la largeur du conteneur, et l'espace entre les lignes est un pourcentage de sa hauteur. Les pourcentages sont pratiques pour les mises en page fluides, mais ils font croître la gouttière avec le conteneur, donc les longueurs fixes sont généralement plus prévisibles.

Exemple d'un conteneur de grille où l'espace est défini par des pourcentages

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 20%;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-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 »

Exemple de la propriété grid-gap avec deux valeurs :

Lorsque vous passez deux valeurs, la première définit l'espace entre les lignes et la seconde définit l'espace entre les colonnes. Ici, les lignes sont séparées par 20px et les colonnes par 80px :

Exemple d'une propriété CSS grid-gap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 20px 80px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-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 »

Valeurs

Valeur	Description	Essayer
grid-row-gap	Spécifie la taille de l'espace entre les lignes dans une mise en page en grille. La valeur par défaut est 0. Avec la syntaxe à deux valeurs, cela correspond à la première valeur.
grid-column-gap	Spécifie la taille de l'espace entre les colonnes dans une mise en page en grille. La valeur par défaut est 0. Avec la syntaxe à deux valeurs, cela correspond à la deuxième valeur.	Essayer »
initial	Applique la valeur par défaut de la propriété.
inherit	Hérite la propriété de son élément parent.

Support des navigateurs

grid-gap est pris en charge par tous les navigateurs modernes. Comme c'est un alias pour la propriété standard gap, vous n'avez généralement pas besoin des deux. Si vous devez prendre en charge de très anciennes implémentations de grille, vous pouvez indiquer grid-gap pour elles et gap pour tout le reste :

.grid {
  display: grid;
  grid-gap: 20px;  /* fallback for legacy browsers */
  gap: 20px;       /* standard property wins where supported */
}

Propriétés associées

grid-row-gap et grid-column-gap — les propriétés longues que grid-gap combine.
grid — le raccourci pour toute une mise en page en grille.
grid-template-columns — définit les colonnes entre lesquelles se trouvent les espaces.

Pratique

Quelle est l'utilité de la propriété 'grid-gap' en CSS ?

Elle sert à ajouter de l'espace uniquement entre les lignes dans une mise en page en grille.Elle sert à ajouter une bordure autour des cellules dans une mise en page en grille.Elle sert à ajouter de l'espace entre les colonnes et les lignes dans une mise en page en grille.Elle sert à déterminer la taille de la grille.Elle sert à aligner les éléments au sein d'une grille.