Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

grid-template-rows - Propriété CSS

grid-template-rows

Résumé des caractéristiques de la propriété grid-template-rows

Description rapide
Définition du nombre et de la hauteur des lignes d'une grille.
Statut
Standard
Valeurs prédéfinies
none | repeat() | subgrid
Pourcentages
Calculés par rapport à la hauteur du container grille.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Progressive si les hauteurs sont exprimées par des valeurs numériques. Brutale dans le cas contraire.
Module W3C
Module CSS - Mise en page par grille
Références (W3C)
 🡇  
 🡅  
Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: CRD (document proposé pour la recommandation)

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 .

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.

  • length est une valeur numérique suivie d'une unité de dimension. L'unité fr étant particulièrement pratique ici.
  • % est un pourcentage dont l'évaluation correspond à une dimension.
  • [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é.
Syntaxe de grid-template-rowsSchéma syntaxique de la propriété CSS grid-template-rows (nombre et hauteur des lignes dans une grille). [string[string] none none auto auto length / % length / % min-content min-content max-content max-content fit-content fit-content fct() fct() subgrid subgrid [string[string]grid-template-rows;grid-template-rows;Télécharger l'image en SVG
  • 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 unité 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.

    Mise en page masonry

  • grid-template-rows: initial; grid-template-rows: inherit; grid-template-rows: revert; grid-template-rows: revert-layer; grid-template-rows: unset;

    La valeur initiale est : none.

Animation de la propriété 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.

Simulateur.

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.

grid-template-rows :
1958
Les Laboratoires Bell créent le premier Modem.
1969
Création du Network Working Group et connexion des premiers ordinateurs entre quatre universités américaines.
1971
23 ordinateurs sont reliés sur ARPANET. Envoi du premier courriel.
1973
L'Angleterre et la Norvège rejoignent le réseau ARPANET.
1973
Définition du protocole TCP/IP.
1979
Création des NewsGroups (forums de discussion Usenet) par des étudiants américains.
1983
Premier serveur de noms de sites (serveur DNS).
1984
1 000 ordinateurs connectés.
1987
10 000 ordinateurs connectés.

Prise en charge par les navigateurs (compatibilité).

Les navigateurs qui traient les grilles traitent également la propriété grid-template-rows de façon correcte. Il y a cependant quelques incompatibilités au sujet des nouvelles valeurs comme subgrid ou masonry.

Colonne 1
Prise en charge des conteneurs grille et de la propriété grid-template-rows.
Colonne 2
Support des sous-grilles, et de la valeur subgrid dans la syntaxe de grid-template-rows.
Colonne 2
Support de la valeur masonry dans la syntaxe de grid-template-rows (mise en page du type "maçonnerie" - Voir explications plus haut).
1
grid-template-rows
2
subgrid
3
masonry
Estimation de la prise en charge en pourcentage du parc actuel.
93%
13%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Compatibilité avec le navigateur Internet Explorer  .

Internet Explorer est officiellement abandonné, mais voici quand même une comparaison entre le code standard et celui à utiliser sur ce navigateur.

#exemple-standard { display:grid; grid-template-rows:50px 50px 100px; }
#exemple-ie { display:-ms-grid; -ms-grid-rows:50px 50px 100px; } #exemple-ie :nth-child(1) { -ms-grid-row:1; -ms-grid-column:1; } #exemple-ie :nth-child(2) { -ms-grid-row:1; -ms-grid-column:2; } #exemple-ie :nth-child(3) { -ms-grid-row:1; -ms-grid-column:3; } #exemple-ie :nth-child(4) { -ms-grid-row:2; -ms-grid-column:1;* } ...

Voir aussi, dans le même module de standardisation que grid-template-rows.

Les spécifications CSS éditées par le W3C sont organisées en modules. grid-template-rows fait partie du Module CSS - Mise en page par grille (CSS Grid Layout Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Propriété raccourcis définissant les principaux paramètres d'une grille.
Positionne un élément dans une zone nommée de la grille.
Mode de calcul des colonnes 'auto' dans une grille.
Mode de calcul de l'emplacement des éléments dans la grille.
Mode de calcul de la hauteur 'auto' des lignes dans une grille.
Numéro de colonne(s) d'un élément dans une grille.
Numéro de la colonne de fin d'un élément dans une grille.
Numéro de la colonne de début d'un élément dans une grille.
Numéro des lignes d'un élément dans une grille.
Numéro de la ligne de fin d'un élément dans une grille.
Numéro de la ligne de départ d'un élément dans une grille.
Largeur des colonnes et hauteur des lignes d'une grille.
Définition de zones nommées dans une grille
Définition du nombre et de la largeur des colonnes d'une grille.

Fonctions.

Renvoie une valeur comprise dans une fourchette.
Répète une valeur un certain nombre de fois.