Propriété CSS grid-row

La propriété CSS grid-row définit la position et la taille d'un élément de grille au sein des lignes d'une CSS Grid. C'est une propriété raccourcie qui combine grid-row-start et grid-row-end en une seule déclaration, contrôlant la ligne de début et la ligne de fin de l'élément.

Une grille est divisée par des lignes de rangée horizontales numérotées à partir de 1 en haut. grid-row indique à un élément de s'étendre d'une ligne de début à une ligne de fin. Pour contrôler chaque bord indépendamment, utilisez directement les propriétés longues :

grid-row-start — la ligne où l'élément commence.
grid-row-end — la ligne où l'élément se termine.

Ainsi, grid-row: 1 / 3 est exactement équivalent à écrire grid-row-start: 1; grid-row-end: 3.

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

Syntaxe

grid-row: <start-line> / <end-line>;

La valeur avant la barre oblique est la ligne de début ; la valeur après est la ligne de fin. La ligne de fin est exclusive — l'élément remplit les pistes jusqu'à cette ligne, mais ne l'inclut pas. Vous pouvez combiner numéros de lignes, span et lignes nommées :

/* Explicit line numbers */
grid-row: 2 / 4;       /* start at line 2, end at line 4 → spans rows 2 and 3 */

/* Span keyword */
grid-row: 2 / span 2;  /* start at line 2, span 2 rows */
grid-row: span 3;       /* span 3 rows from wherever auto-placement puts the item */

/* Negative line number */
grid-row: 1 / -1;      /* from first line to last line (full height) */

/* Single value — sets start only; end defaults to auto (one row) */
grid-row: 3;

Comment les lignes de rangée sont numérotées

Une grille avec trois rangées explicites possède quatre lignes de rangée : les lignes 1, 2, 3 et 4. Les numéros positifs comptent depuis le haut ; les numéros négatifs comptent depuis le bas, donc -1 est toujours la dernière ligne explicite. Cela fait de grid-row: 1 / -1 un moyen fiable de couvrir toute la hauteur de la grille explicite, quel que soit le nombre de rangées.

Si vous référencez une ligne qui n'existe pas — par exemple grid-row: 1 / 6 sur une grille à trois rangées — le navigateur crée des rangées implicites pour y répondre. Ces rangées implicites obtiennent leur taille grâce à grid-auto-rows.

Exemple de base : placer un élément sur une rangée spécifique

L'élément avec la classe .box est déplacé vers la deuxième rangée en définissant grid-row: 2 / 3. La première rangée est laissée vide, et les éléments restants s'écoulent dans les cellules placées automatiquement.

<!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>

Essayez vous-même »

Résultat

![CSS grid-row avec deux éléments](/uploads/media/default/0001/04/90bf26fe77ccc66f3b0039d2cc9a0232626ef7ca.png "CSS grid-row example result" =420x)

Couvrir plusieurs rangées avec `span`

Utiliser grid-row: span 2 permet à un élément d'occuper deux rangées sans spécifier de numéros de lignes exacts. L'algorithme de placement automatique insère l'élément là où il convient et l'étend vers le bas sur deux rangées. Les éléments suivants sont poussés dans les prochaines cellules disponibles.

<!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 span 2 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>

Essayez vous-même »

Quand utiliser `grid-row`

Utilisez grid-row lorsqu'un élément doit occuper une tranche verticale spécifique de la grille plutôt que la cellule unique qu'un placement automatique lui attribuerait. Cas d'utilisation courants :

Barre latérale ou panneau héros pleine hauteur : grid-row: 1 / -1 étire un élément de la première à la dernière ligne de rangée explicite.
Tuile mise en avant dans une grille de cartes : grid-row: span 2 rend une carte visuellement plus haute que ses voisines.
Ancrage sur une ligne explicite : grid-row: 2 / 4 maintient un élément dans une position verticale fixe même lorsque le contenu environnant change.

Pour contrôler le placement horizontal, utilisez la propriété correspondante grid-column. Pour définir les deux axes simultanément, la propriété raccourcie grid-area combine grid-row et grid-column en une seule déclaration. Pour définir comment la grille crée des rangées automatiquement, consultez grid-template-rows et grid-auto-rows.

Attention : les numéros de lignes comptent les lignes entre les pistes, et non les pistes elles-mêmes. Une grille à trois rangées possède quatre lignes de rangée (1–4). Les numéros négatifs comptent depuis la fin : -1 est la dernière ligne explicite, -2 est l'avant-dernière, et ainsi de suite. Si grid-row référence une ligne au-delà de la grille explicite, le navigateur ajoute des rangées implicites dimensionnées par grid-auto-rows.

Valeurs

Valeur	Description
`<line>`	Un entier (positif ou négatif) référençant une ligne de rangée de grille spécifique.
`span <n>`	L'élément couvre `n` pistes de rangée. Peut être utilisé comme valeur de début ou de fin.
`auto`	Par défaut — le placement et l'étendue sont déterminés par l'algorithme de placement automatique (une rangée).
`initial`	Réinitialise la propriété à sa valeur initiale (`auto`).
`inherit`	Hérite la valeur de l'élément parent.

Pratique

En CSS, que spécifie la propriété 'grid-row' ?

Elle spécifie la taille et l'emplacement d'un élément de grille au sein de la rangée de grilleElle spécifie le style de police de la grilleElle spécifie la taille et l'emplacement d'un élément de grille au sein de la colonne de grilleElle permet à un élément d'occuper plus d'une rangée de grilleElle spécifie la couleur d'arrière-plan de la grille