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>

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>

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.

Support de Navigateurs

57.0+ 16.0+ 52.0+ 10.1+ 44.0+


Trouvez-vous cela utile?

Articles Associées