grid-template-rows - Propriété CSS
Résumé des caractéristiques de la propriété grid-template-rows
none
| repeat()
| subgrid
none
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é.
- 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
etmax-content
etfit-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 cellule2
Contenu de la cellule3
Contenu de la cellule4
Contenu de la cellule56 - 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 parend
définissent en plus un nom pour une plage. Par exemple les nomshaut-start
ethaut-end
définissent les noms de deux des lignes de la grille, et définissent également une plage nomméehaut
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'axeinline
. Elle est donc utilisable avecgrid-template-rows
sur les grilles remplies lignes par lignes. Sur une mise en pagemasonry
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
; 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.
Les Laboratoires Bell créent le premier Modem.
Création du Network Working Group et connexion des premiers ordinateurs entre quatre universités américaines.
23 ordinateurs sont reliés sur ARPANET. Envoi du premier courriel.
L'Angleterre et la Norvège rejoignent le réseau ARPANET.
Définition du protocole TCP/IP.
Création des NewsGroups (forums de discussion Usenet) par des étudiants américains.
Premier serveur de noms de sites (serveur DNS).
1 000 ordinateurs connectés.
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
.
grid-template-rows
.
subgrid
dans la syntaxe de grid-template-rows
.
masonry
dans la syntaxe de grid-template-rows
(mise en page du type "maçonnerie" - Voir explications plus haut).
grid-template-rows
subgrid
masonry
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 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.