Propriété CSS grid-gap

❮ Précédent Suivant ❯

La propriété grid-gap est utilisée pour spécifier la taille de l'espace entre les lignes et les colonnes. C'est propriété est une propriété raccourcie pour les propriété suivantes:

Valeur initiale	normal normal
Appliquée à	Conteneurs de grille.
Héritée	Non.
Animable	Oui. L'espace est animable.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	object.style.gridGap = "30px 70px";

Syntaxe

grid-gap: grid-row-gap | grid-column-gap | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété grid-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 l'exemple suivant, la propriété grid-gap est spécifiée en pourcentages:

Exemple

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

Un autre exemple, dans lequel la première valeur spécifie l'espace entre les lignes et la seconde valeur spécifie l'espace entre les colonnes:

Exemple

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

Valeurs

Valeur	Description
grid-row-gap	Spécifie la taille de l'espace entre les lignes de la grille. La valeur initiale est 0.
grid-column-gap	Spécifie la taille de l'espace entre les colonnes de la grille. La valeur initiale est 0.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.