Propriété CSS grid-row-end

La propriété CSS grid-row-end définit l'endroit où un élément de grille se termine le long de l'axe de bloc (ligne). Vous lui fournissez soit un numéro de ligne où s'arrêter, soit une valeur span indiquant combien de lignes l'élément doit couvrir, soit auto pour laisser le navigateur le placer automatiquement. Combinée avec grid-row-start, elle définit les bords de début et de fin de bloc de la zone de grille de l'élément.

Comment les lignes de grille sont numérotées

Une grille est délimitée par des lignes numérotées, et non par les pistes (rangées) elles-mêmes. Une grille comportant trois rangées possède quatre lignes horizontales : la ligne 1 longe le bord supérieur, la ligne 4 longe le bord inférieur.

line:  1 ─────────────────────
         |  row 1             |
line:  2 ─────────────────────
         |  row 2             |
line:  3 ─────────────────────
         |  row 3             |
line:  4 ─────────────────────

grid-row-end fait référence à l'une de ces lignes :

grid-row-end: 3 fait se terminer l'élément à la ligne 3 — il occupe les rangées 1 et 2 s'il commence à la ligne 1.
grid-row-end: span 2 fait se terminer l'élément 2 rangées après son point de départ, indépendamment du numéro de ligne absolu.

Vous pouvez également compter à partir de la fin avec des nombres négatifs : -1 correspond à la dernière ligne (le bord inférieur), -2 correspond à celle qui la précède. Ainsi, grid-row-end: -1 atteint toujours le bas de la grille explicite, quel que soit le nombre de rangées — pratique pour les éléments « pleine hauteur ».

Astuce : la valeur décrit uniquement l'endroit où l'élément s'arrête. L'endroit où il commence provient de grid-row-start (ou du placement automatique). Le raccourci grid-row définit les deux à la fois — par exemple, grid-row: 1 / 3 place l'élément de la ligne de rangée 1 à la ligne de rangée 3, couvrant deux rangées.

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

Syntaxe

grid-row-end: auto | <integer> | span <integer> | inherit | initial | unset;

Exemple : valeur de numéro de ligne

La valeur par défaut auto fait occuper à un élément une seule rangée. Définir grid-row-end: 3 sur un élément qui commence à la ligne 1 (par défaut) lui fait couvrir les deux premières rangées — le bord inférieur de l'élément se positionne sur la ligne 3.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 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-end: 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end 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>
  </body>
</html>

Essayez vous-même »

Résultat

![CSS grid-row-end avec plusieurs éléments](/uploads/media/default/0001/04/260b91923438edb01b18d93650fd3050e244dd52.png "CSS grid-row-end example" =420x)

L'élément 1 se termine à la ligne de grille 3, s'étirant ainsi sur les deux premières rangées tandis que les autres éléments s'arrangent autour de lui. Dans l'exemple suivant, le même effet est obtenu avec le mot-clé span au lieu d'un numéro de ligne fixe.

Exemple : valeur span

Utiliser span est pratique lorsque vous vous souciez du nombre de rangées couvertes par un élément plutôt que de la ligne exacte où il se termine. grid-row-end: span 3 signifie que l'élément s'étend sur trois rangées vers le bas à partir de son point de départ.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: 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-end: span 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-row-end property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div class="box">2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Essayez vous-même »

Avec grid-row-end: span 3, l'élément 2 conserve sa ligne de départ automatique et s'étend sur trois rangées vers le bas, quelle que soit la ligne absolue sur laquelle cela tombe.

Valeurs

Valeur	Description
`auto`	L'élément couvre une seule rangée (placement automatique). C'est la valeur par défaut.
`span n`	L'élément se termine `n` rangées après sa ligne de départ.
`<integer>`	Un numéro de ligne de rangée positif ou négatif où l'élément doit se terminer. Les entiers négatifs comptent depuis la fin de la grille (`-1` = dernière ligne).
`initial`	Définit la propriété à sa valeur par défaut (`auto`).
`inherit`	Hérite de la valeur de l'élément parent.
`unset`	Supprime la valeur actuelle, revenant à la valeur héritée ou initiale.

Pièges courants

span est relatif ; les numéros de ligne sont absolus. grid-row-end: 3 s'arrête toujours à la ligne 3 ; grid-row-end: span 3 s'arrête trois rangées après la ligne de départ. Les confondre est le bogue de placement de grille le plus courant.
La fin avant le début ? Le navigateur les échange. Si grid-row-end se résout à une ligne avant grid-row-start, le navigateur échange automatiquement les deux valeurs pour que la zone reste valide.
Définir uniquement grid-row-end ne déplace pas le début. La ligne de départ est toujours placée automatiquement. Pour fixer les deux bords, utilisez le raccourci grid-row (grid-row: 1 / 3) ou définissez également grid-row-start.
Les valeurs négatives n'atteignent que la grille explicite. -1 pointe vers la dernière ligne de la grille définie par grid-template-rows ; elle ne s'étend pas aux rangées créées implicitement.
width/height explicites sont généralement inutiles. La mise en page de grille dimensionne automatiquement les éléments dans leurs cellules assignées.

Propriétés liées

grid-row-start — la ligne où l'élément commence sur l'axe de rangée.
grid-row — raccourci qui définit à la fois les lignes de début et de fin de rangée.
grid-column-end — la propriété équivalente sur l'axe des colonnes.
grid-template-rows — définit les pistes de rangée et les lignes entre elles.
grid-area — définit les quatre lignes de placement (début de rangée, début de colonne, fin de rangée, fin de colonne) en une seule déclaration.
grid-auto-rows — contrôle la taille des pistes de rangée créées implicitement lorsque les éléments débordent de la grille explicite.

Pratique

Que fait la propriété CSS 'grid-row-end' ?

Elle définit la ligne où le côté de fin d'un élément de grille se termine horizontalement.Elle définit la ligne où le côté de fin d'un élément de grille se termine verticalement.Elle aligne les éléments dans la grille verticalement.Elle contrôle l'espace entre deux rangées dans la grille.