Propriété CSS grid-row-gap

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

Elle peut être spécifiée par "px" et par pourcentages.

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

Syntaxe

grid-row-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: 20px;
      grid-row-gap: 0;
      background-color: #666;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #eee;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété grid-row-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 class="box8">8</div>
    </div>
  </body>
</html>

Essayez-vous-même!

Voici un exemple, dans lequel l'espace entre les lignes est 40px:

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: 20px;
      grid-row-gap: 40px;
      background-color: #666;
      padding: 10px;
      }
      .grid-container > div {
      background-color: #eee;
      text-align: center;
      padding: 20px 0;
      font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété grid-row-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
normal	Utilise l'espacement initiale du navigateur. C'est la valeur initiale de cette propriété.
length	L'espace entre les lignes est spécifié par px ou par pourcentages. Valeurs négatives ne sont pas autorisées. La valeur initiale est 0.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.