Propriété CSS grid-template-rows

La propriété grid-template-rows définit combien de lignes possède une grille CSS et quelle est la hauteur de chacune. Vous listez les tailles de piste l'une après l'autre, séparées par des espaces, et CSS crée une ligne explicite par valeur. Ainsi, grid-template-rows: 100px 200px crée deux lignes — la première haute de 100 px, la seconde de 200 px.

Cette propriété n'affecte que les conteneurs de grille (éléments avec display: grid ou display: inline-grid). C'est l'équivalent dans la direction des lignes de grid-template-columns, et les deux sont souvent écrits ensemble pour définir une grille complète.

La taille d'une piste peut être une longueur fixe, un pourcentage, une unité flexible fr, un mot-clé basé sur le contenu, ou une fonction telle que repeat() et minmax(). Combiner ces valeurs rend les mises en page grid flexibles :

Utilisez une longueur (px, rem) quand vous voulez qu'une ligne reste à une hauteur exacte.
Utilisez fr quand vous voulez que les lignes se partagent l'espace restant de façon proportionnelle.
Utilisez auto ou min-content / max-content quand la ligne doit s'agrandir pour s'adapter à son contenu.
Utilisez repeat() pour éviter de saisir plusieurs fois la même taille.
Utilisez minmax() quand une ligne a besoin d'un plancher et d'un plafond (par exemple, « au moins 100px, mais agrandissez si nécessaire »).

Info

Les lignes que vous créez ici constituent la grille explicite. Si des éléments débordent dans des lignes que vous n'avez pas définies, ces lignes supplémentaires sont dimensionnées par grid-auto-rows à la place.

Valeur initiale	none
S'applique à	Les conteneurs de grille.
Héritée	Non.
Animable	Oui. La taille des lignes est animable.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	`object.style.gridTemplateRows = "20px 100px"`

Syntaxe

grid-template-rows: none
                  | auto
                  | max-content
                  | min-content
                  | <length>
                  | <percentage>
                  | <flex>           /* e.g. 1fr */
                  | fit-content(<length-percentage>)
                  | repeat(<count>, <track-list>)
                  | minmax(<min>, <max>)
                  | subgrid
                  | [line-name] <track-size> [line-name];

Les mots-clés standard initial et inherit s'appliquent également, comme pour toute propriété CSS.

Utilisation de base

Lignes dimensionnées automatiquement

Avec auto, chaque ligne s'agrandit pour s'adapter à sa cellule la plus haute. C'est le point de départ le plus courant.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .auto-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: auto auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
        margin-top: 30px;
      }
      .auto-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>grid-template-rows: auto auto</h2>
    <div class="auto-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>
  </body>
</html>

Essayez vous-même »

Avec grid-template-rows: auto auto, les deux lignes s'agrandissent pour s'adapter à leur contenu, de sorte que chaque cellule a la même hauteur que son élément frère le plus grand dans cette ligne.

Lignes à hauteur fixe

Passez des valeurs en pixels pour fixer les lignes à une hauteur exacte, indépendamment du contenu.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-template-rows: 100px 300px;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>grid-template-rows: 100px 300px</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>
  </body>
</html>

Essayez vous-même »

Ici les lignes sont fixes : la première fait toujours 100 px de haut et la seconde toujours 300 px, quelle que soit la quantité de contenu que les cellules contiennent. Le contenu qui dépasse ces hauteurs est rogné ou défile selon le paramètre overflow.

Unités fr, repeat() et minmax()

L'unité fr

fr (« fraction ») représente une part de l'espace libre restant dans la grille après que les pistes de taille fixe ont été placées. L'espace libre correspond à la taille totale de la grille moins l'espace occupé par les pistes ayant des tailles absolues ou basées sur le contenu.

/* Three equal rows */
grid-template-rows: 1fr 1fr 1fr;

/* Header takes half, body takes the other half */
grid-template-rows: 1fr 1fr;

/* Header is fixed, body gets all remaining space */
grid-template-rows: 80px 1fr;

L'unité fr est utile quand la grille a une hauteur connue (définie sur le conteneur) et que vous voulez que les pistes la remplissent sans faire de calcul.

repeat()

repeat(count, track-list) est un raccourci pour répéter une ou plusieurs tailles de piste.

/* Same as: 1fr 1fr 1fr 1fr */
grid-template-rows: repeat(4, 1fr);

/* Alternating: 80px 1fr 80px 1fr */
grid-template-rows: repeat(2, 80px 1fr);

minmax()

minmax(min, max) donne à une piste une taille minimale et une taille maximale. Le navigateur résout la taille réelle quelque part dans cette plage en fonction du contenu et de l'espace disponible.

/* Row is at least 80px; grows with content up to 200px */
grid-template-rows: minmax(80px, 200px);

/* Row is at least 80px; grows to fill remaining space */
grid-template-rows: minmax(80px, 1fr);

Combiner les trois

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-grid {
        display: grid;
        height: 600px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(2, 1fr) minmax(80px, auto);
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .flex-grid > div {
        background-color: #eee;
        text-align: center;
        padding: 10px;
        font-size: 24px;
      }
    </style>
  </head>
  <body>
    <h2>fr, repeat() and minmax()</h2>
    <div class="flex-grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

La grille fait 600 px de haut. repeat(2, 1fr) crée deux lignes qui prennent chacune une part égale de la hauteur disponible. La troisième ligne utilise minmax(80px, auto) : elle fait au moins 80 px de haut mais s'agrandit si son contenu dépasse cette taille.

Pistes avec lignes nommées

Vous pouvez donner un nom aux lignes entre les rangées en encadrant le nom entre crochets. Les lignes nommées facilitent grandement le positionnement des éléments avec grid-row sans avoir à compter les lignes de grille.

.layout {
  display: grid;
  grid-template-rows:
    [header-start] 80px [header-end body-start]
    1fr
    [body-end footer-start] 60px [footer-end];
}

/* Place an item from body-start to body-end */
.main {
  grid-row: body-start / body-end;
}

Une ligne peut porter plusieurs noms séparés par des espaces à l'intérieur des mêmes crochets — [header-end body-start] signifie que la même ligne est à la fois la fin de l'en-tête et le début du corps.

Mots-clés basés sur le contenu

auto

auto signifie que la piste est dimensionnée par son contenu (équivalent à minmax(auto, auto)). La ligne s'agrandit jusqu'à l'élément le plus haut qu'elle contient, mais elle ne rétrécit pas en dessous de la taille minimale du contenu. Lorsque des pistes fr sont également présentes dans la même déclaration, les pistes auto sont résolues en premier et les pistes fr se partagent l'espace restant.

min-content

La ligne est exactement assez haute pour contenir le plus petit contenu de l'une de ses cellules — en pratique, aussi haute que le mot le plus long ou la plus petite image.

max-content

La ligne est assez haute pour contenir le plus grand contenu sans retour à la ligne. Équivalent à donner à chaque cellule autant d'espace vertical qu'elle le souhaite.

fit-content(`<value>`)

fit-content(200px) se comporte comme auto (s'agrandit avec le contenu) mais est plafonné à l'argument fourni. Équivalent à min(max-content, max(auto, 200px)). Utile quand vous voulez qu'une ligne soit dimensionnée selon le contenu mais ne dépasse jamais une limite.

subgrid

Lorsqu'un élément de grille est lui-même un conteneur de grille, subgrid sur grid-template-rows indique à cette grille interne d'utiliser les pistes de ligne de la grille parente plutôt que de créer les siennes. Cela vous permet d'aligner le contenu dans des éléments de grille imbriqués selon le rythme de la grille extérieure.

.parent {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
}

.child {
  display: grid;
  /* This child spans 3 rows of the parent */
  grid-row: 1 / 4;
  /* Adopt those same 3 row tracks */
  grid-template-rows: subgrid;
}

subgrid est largement pris en charge depuis fin 2023 (Chrome 117+, Firefox 71+, Safari 16+).

auto-fill et auto-fit dans repeat()

auto-fill et auto-fit sont utilisés à l'intérieur de repeat() pour créer autant de pistes que le conteneur peut en accueillir. On les voit plus souvent avec grid-template-columns, mais ils fonctionnent de manière identique avec les lignes quand le conteneur a une hauteur fixe.

/* As many rows of at least 100px as will fit */
grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));

auto-fill — remplit la grille avec autant de pistes que possible, même si certaines sont vides.
auto-fit — identique à auto-fill, mais réduit les pistes vides à zéro afin que les éléments s'étirent pour remplir l'espace disponible.

Valeurs

Valeur	Description
`none`	Par défaut. Aucune ligne explicite n'est définie ; toutes les lignes sont implicites.
`auto`	La hauteur de la ligne est déterminée par son contenu ou l'espace disponible.
`max-content`	La ligne est aussi haute que la plus grande taille intrinsèque parmi ses éléments.
`min-content`	La ligne est aussi haute que la plus petite taille intrinsèque parmi ses éléments.
`minmax(min, max)`	La taille de la piste est comprise dans la plage donnée. `min` ne peut pas être `fr` ; `max` peut l'être.
`<length>`	Une hauteur fixe telle que `100px` ou `2rem`.
`<percentage>`	Une hauteur relative à la hauteur du conteneur de grille (doit être définie).
`<flex>` (`fr`)	Une dimension non négative qui prend une part de l'espace libre restant.
`fit-content(<value>)`	Dimensionné selon le contenu, mais plafonné à l'argument fourni.
`repeat(count, tracks)`	Répète un motif de tailles de piste. `count` peut être un nombre, `auto-fill` ou `auto-fit`.
`subgrid`	La liste des pistes est héritée de la grille parente.
`initial`	Réinitialise la propriété à sa valeur par défaut (`none`).
`inherit`	Hérite la valeur de l'élément parent.

Pièges courants

fr nécessite une hauteur de conteneur définie. Si le conteneur de grille n'a pas de height explicite, il n'y a pas d'espace libre à partager pour les lignes fr — elles se replient sur le dimensionnement auto. Définissez toujours une height (ou min-height) sur le conteneur lors de l'utilisation de fr dans les lignes.
Les pourcentages nécessitent une hauteur de conteneur définie pour la même raison. Si la hauteur du conteneur est intrinsèque, les tailles de ligne en pourcentage se résolvent également en auto.
Lignes explicites uniquement. Cette propriété dimensionne les lignes que vous déclarez. Les lignes supplémentaires générées par les éléments en débordement sont dimensionnées par grid-auto-rows — ces lignes implicites sont par défaut auto si grid-auto-rows n'est pas défini.
minmax(0, 1fr) vs 1fr. L'unité fr a un minimum implicite de auto, donc les lignes 1fr ne peuvent pas rétrécir en dessous de leur taille de contenu. Utilisez minmax(0, 1fr) quand vous voulez explicitement que les lignes rétrécissent en dessous du contenu — par exemple, à l'intérieur de conteneurs de défilement.

Pratique

Que fait la propriété grid-template-rows en CSS ?

Elle définit le nombre de lignes dans une mise en page grid.Elle spécifie la ou les taille(s) des lignes dans une mise en page grid.Elle crée la mise en page grid en CSS.Elle contrôle la quantité d'espace entre chaque ligne dans une mise en page grid.Elle définit l'ordre des couches dans une mise en page grid.

Propriétés associées

grid-template-columns — l'équivalent dans la direction des colonnes de cette propriété.
grid-auto-rows — dimensionne les lignes créées implicitement, en dehors de la grille explicite.
grid-template-areas — nomme les zones de grille pour positionner les éléments par référence.
grid-template — raccourci pour les lignes, les colonnes et les zones en une seule déclaration.
grid-row — raccourci pour placer ou étendre un élément de grille sur des pistes de ligne.
grid-auto-flow — contrôle la direction et l'algorithme de placement automatique des éléments.
grid — le raccourci complet de la grille et un point de départ pour la mise en page grid.