Propriété CSS grid-row

La propriété grid-row est utilisée pour spécifier sur quelle ligne de rangée commencer l'élément, et sur quelle ligne de rangée se terminer. Il s'agit d'un raccourci pour les propriétés suivantes :

Valeur initiale	auto auto
S'applique à	Éléments de grille.
Héritée	Non.
Animable	Oui. Les éléments sont animables.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	object.style.gridRow = "1 / span 2";

Syntaxe

Syntaxe CSS de grid-row

css

grid-row: grid-row-start / grid-row-end;

Exemple de la propriété grid-row :

Exemple de code CSS grid-row

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row: 2 / 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row property example</h2>
    <div class="grid-container">
      <div class="box">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

CSS grid-row with two items

Exemple de la propriété grid-row spécifiée comme span 2 :

Exemple CSS grid-row avec deux éléments

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box {
        grid-row: span 2;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div class="box">4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
grid-row-start	Spécifie la position de départ de l'élément.
grid-row-end	Spécifie la position de fin de l'élément et le nombre de rangées à couvrir.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

In CSS, what does the 'grid-row' property specify?

It specifies a grid item’s size and location within the grid rowIt specifies the font style of the gridIt specifies grid item’s size and location within the grid columnIt allows an item to occupy more than one grid rowIt specifies the background color of the grid

Propriété CSS grid-row ​

Syntaxe ​

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

Résultat ​

Exemple de la propriété grid-row spécifiée comme span 2 : ​

Valeurs ​