Propriété CSS grid-column-gap

La propriété grid-column-gap définit la taille de l'espace entre les colonnes.

La longueur peut être spécifiée par pixels et par pourcentages.

Valeurs négatives ne sont pas autorisées.

Valeur initiale	normal
Appliquée à	Éléments multi-colonnes, conteneurs flexibles, conteneurs de grille.
Héritée	Non.
Animable	Oui. L'espace est animable.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	object.style.gridColumnGap = "30px";

Syntaxe

grid-column-gap: normal | length;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété grid-column-gap</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!

Dans ces exemples, grid-column-gap est spécifiée par pourcentages:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété grid-column-gap</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!

Valeurs

Valeur	Description
normal	Utilise l'espacement initiale du navigateur entre les colonnes. C'est la valeur initiale de cette propriété.
length	L'espace entre les colonnes est spécifiée en px ou en pourcentages. Valeurs négatives sont autorisées. Valeur initiale est 0.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.