Grid-template-rows - Propriété CSS

(1) L'animation est progressive si les hauteurs sont exprimées par des valeurs numériques. Brutale dans le cas contraire.

Schéma de la syntaxe de grid-template-rows.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• length est une valeur numérique suivie d'une des unités de dimension. L'unité fr étant particulièrement pratique ici.
• % est un pourcentage calculé d'après la hauteur du conteneur grille.
• [string] est un texte entre crochets. Ce texte sera le nom d'une ligne.
• Cette syntaxe doit être répétée autant de fois que le nombre de lignes désiré.

Description de la propriété grid-template-rows.

grid-template-rows définit le nombre et la hauteur des lignes d'une grille. Cette propriété accepte une série de valeurs séparées par des espaces. Le nombre de valeurs indique le nombre de lignes. Chacune des valeurs peut être une dimension ou une des valeurs prédéfinies min-content ou max-content (reportez-vous aux exemples de syntaxe ci-après.

Lorsque la grille est remplie de gauche à droite (grid-auto-flow:column), la hauteur de chacune des lignes est fixée par le contenu des cellules. Il n'est donc pas indispensable de définir la propriété grid-template-rows, sauf si on souhaite des lignes d'une hauteur bien précise. Mais pour les grilles remplies du haut vers le bas, la hauteur et le nombre de lignes doivent être définies par grid-template-rows.

La propriété grid-template-rows doit être appliquée à un container grille. Elle sera sans effet sur un autre type d'élément.

Pour davantage d'informations sur les grilles reportez-vous au tutoriel sur les .

Nommage des lignes et des plages.

La propriété grid-template-rows permet également de donner des noms aux lignes de la grille. Ces noms pourront être utilisés pour positionner les éléments dans la grille plus facilement qu'en utilisant les numéros de ligne.

Lorsque deux lignes sont nommées avec des noms qui se terminent par start et par end, tout en ayant un début identique, ils définissent également le nom d'une plage. Exemple : si les noms pied-start et pied-end sont définis, ils créent une plage nommée pied qui s'étend depuis la ligne nommée pied-start jusqu'à la ligne nommée pied-end.

Syntaxes de grid-template-rows.

• grid-template-rows: none;

  Les lignes ne sont créées que si c'est nécessaire, par exemple si un des éléments comporte une propriété grid-row qui le positionne dans cette ligne ou si le nombre d'éléments nécessite de créer une ligne supplémentaire dans la grille.

  Dans ce cas la hauteur des lignes sera définie par grid-auto-row ou sinon fixée à auto.

• grid-template-rows: auto auto auto;

  Trois lignes de la grille sont crées ans la grille, avec une hauteur déterminée par le contenu des cellules. Si une ligne ne contient que des cellules vides, sa hauteur sera de 0, comme on le voit sur l'exemple ci-dessous.

  S'il y a trop d'éléments pour tenir dans les trois lignes, des lignes supplémentaires peuvent être créées. A l'inverse, s'il n'y a pas suffisamment d'éléments pour remplir toutes les lignes déclarées, les dernière lignes seront vides. Sur notre exemple ci-dessous, on voit nettement l'emplacement d'une ligne vide en bas du conteneur.
• grid-template-rows: 100px 50px 40px;

  L'énumération comporte trois valeurs, il y a donc trois lignes de définies, avec les hauteurs indiquées.

  Ce sont des nombres positifs ou nuls, avec une des unités de dimension. Les pourcentages sont calculés par rapport à la hauteur du container grille lorsque celle-ci est définie.
• grid-template-rows: min-content min-content min-content; grid-template-rows: max-content max-content max-content; grid-template-rows: fit-content fit-content fit-content;

  Les valeurs min-content et max-content et fit-content sont acceptées par la syntaxe, mais ne sont intéressantes que lorsque la grille est remplie du haut vers le bas (grid-auto-flow: column).

  1
  Contenu de la cellule

  2
  Contenu de la cellule

  3
  Contenu de la cellule

  4
  Contenu de la cellule

  5

  6
• grid-template-rows: minmax(50px,100px) minmax(100px,150px); grid-template-rows: fit-content(100px) fit-content(120px);

  L'utilisation de ces fonctions optimise la hauteur des lignes en fonction du contenu, de la place disponible et des limites indiquées.

  Pour une description plus précise de leur fonctionnement, reportez-vous aux pages sur les fonctions minmax(), fit-content()...

• grid-template-rows: repeat(10,50px);

  La fonction repeat() permet de raccourcir la déclaration lorsqu'il y a beaucoup de lignes dans la grille. L'exemple cité ci-dessus définit 10 lignes de 50 pixels de haut.

  Un autre exemple : repeat(20, 100px 50px) crée 40 lignes en alternant des hauteurs de 100 pixels et de 50 pixels.

• grid-template-rows: [haut] 25px 50px 50px [pied] 25px;

  Cette déclaration crée quatre lignes, avec les hauteurs indiquées, et de plus, nomme la première et la dernière ligne. Les noms doivent être inscrits entre crochets. Ils pourront être utilisés à la place des numéros de ligne pour définir l'emplacement des éléments dans la grille.

  Les noms qui se terminent pas start et par end définissent en plus un nom pour une plage. Par exemple les noms haut-start et haut-end définissent les noms de deux des lignes de la grille, et définissent également une plage nommée haut qui s'étend entre ces deux lignes.

• grid-template-rows:subgrid;

  La valeur subgrid peut être utilisée dans le cas d'un conteneur grille inclus dans un autre conteneur grille. subgrid fait correspondre les hauteurs de ligne de la grille interne avec celles de la grille principale. Bien entendu, la grille interne doit occuper plusieurs lignes de la grille principale. Et de plus, le nombre de lignes de la grille interne doit être au plus égal au nombre de lignes occupées dans la grille principale.
• grid-template-rows: masonry; ⚠

  La valeur masonry s'utilise sur l'axe inline. Elle est donc utilisable avec grid-template-rows sur les grilles remplies lignes par lignes. Sur une mise en page masonry les éléments ne sont pas forcément alignés en lignes, mais peuvent se déplacer vers le haut pour compléter les espaces disponibles laissés par la ligne précédente.

  Voici ce que donnerait une mise en page du type "maçonnerie", avec les styles et le résultat correspondants. Il s'agit d'une simulation car les navigateurs ne traitent pas encore l'option masonry.

  

• grid-template-rows: initial; (none) grid-template-rows: inherit; grid-template-rows: revert; grid-template-rows: revertLayer; grid-template-rows: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de grid-template-rows.

L'animation de grid-template-rows mais risque d'être lente, ou peu fluide, à cause des nombreux calculs de mise en page qui doivent être refaits à chaque étape.
Dans tous les cas, l'utilisation de valeurs telles que min-content ou max-content implique une animation sans transition.

Exemple interactif avec la propriété grid-template-rows.

Les valeurs automatiques (min-content, max-content, etc.) ont peu d'effet sur les hauteurs de lignes car celles-ci sont déjà déterminées par le contenu. Par contre les valeurs fixes comme 100px forcent la hauteur des lignes indépendamment du contenu des cellules.

Compatibilité des navigateurs avec grid-template-rows.

Les navigateurs qui traient les grilles traitent également la propriété grid-template-rows de façon correcte. Il y a cependant de grosses incompatibilités au sujet de la nouvelle valeur masonry.

Remarques :

(1) Internet Explorer utilise la propriété non standard -ms-grid-rows.

(2) Désactivé sur Firefox, peut être activé en positionnant le flag layout.css.grid-template-masonry-value.enabled à true.

1

Propriété
grid-template-rows

2

Valeur
subgrid

3

Valeur
masonry

Estimation de la prise en charge globale.

95%

91%

0%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

2

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Histoire de la propriété grid-template-rows.

• Module CSS - Mise en page par grille - Niveau 1

  Introduction des mises en page avec grille.
  Définition des propriétés en rapport avec les grilles, dont grid-template-rows.
  

  07 Avril 2011

  Document de travail.

  

  29 Septembre 2016

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 2

  Ajout de la notion de sous-grille.
  La propriété grid-template-rpws accepte la nouvelle valeur subgrid.
  

  06 Février 2018

  Document de travail.

  

  18 Août 2020

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 3

  Une nouvelle valeur est utilisable avec la propriété grid-template-rows : masonry.
  

  19 Septembre 2024

  Document de travail.

  

  

  

Voir aussi.

Toutes les définitions relatives aux grilles sont regroupées dans la spécification module CSS - Mise en page par grille (CSS Grid Layout Module). En voici la liste pour faciliter vos recherches.

Propriétés :

Fonctions :