W3docs
fr
Se connecter

Propriété CSS grid-row-gap

The grid-row-gap CSS property defines the size of the gap between the rows. See property description, values and examples.

La propriété CSS grid-row-gap définit la taille de l'espacement entre les lignes d'un conteneur de grille. La largeur de l'espacement peut être spécifiée à l'aide d'une valeur de longueur.

Elle peut être spécifiée en pixels (px) ou en pourcentages (%).

info

La propriété row-gap est le raccourci moderne qui définit à la fois grid-row-gap et grid-column-gap. Bien que row-gap soit préféré, grid-row-gap reste valide pour cibler explicitement l'espacement des lignes.

Valeur initiale0
S'applique àConteneurs de grille.
HéritéeNon.
AnimableOui. L'espacement entre les lignes est animable.
VersionCSS Grid Layout Module Level 1
Syntaxe DOMobject.style.gridRowGap = "30px";

Syntaxe

Syntaxe CSS grid-row-gap

grid-row-gap: normal | length;

Exemple de la propriété grid-row-gap :

Exemple de code CSS grid-row-gap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Grid-row-gap property example</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 »

Résultat

Autre exemple de CSS grid-row-gap

Ici, l'espacement entre les lignes est défini à 0. Dans l'exemple suivant, l'espacement entre les lignes est de 40px.

Exemple de la propriété grid-row-gap spécifiée en pixels :

Autre exemple de code CSS grid-row-gap

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Grid-row-gap property example</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 »

Exemple de la propriété grid-row-gap spécifiée en pourcentage :

Exemple de la propriété grid-row-gap spécifiée en pourcentage :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-row-gap: 15%;
        grid-column-gap: 3%;
        background-color: grey;
        padding: 40px;
      }
      .grid-container > div {
        background-color: white;
        text-align: center;
        padding: 25px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
    </div>
  </body>
</html>
Essayez vous-même »

Valeurs

ValeurDescriptionJouer
normalUtilise l'espacement par défaut du navigateur entre les lignes. Il s'agit de la valeur par défaut de cette propriété.
lengthL'espacement entre les lignes est spécifié en px ou en pourcentages. Les valeurs négatives ne sont pas autorisées. La valeur par défaut est 0.Jouer »
initialDéfinit la propriété sur sa valeur par défaut.
inheritHérite la propriété de son élément parent.

Pratique

Pratique

Quel est l'objectif de la propriété 'grid-row-gap' en CSS ?