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>

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>

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.

Support de Navigateurs

1.5+ 3.0+ 11.1+


Trouvez-vous cela utile?

Articles Associées