CSS - Propriété grid-template-rows
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
.
Pour davantage d'informations sur les grilles reportez-vous au tutoriel grilles CSS ou
à la propriété grid
.
Exemple.
Cet exemple illustre l'utilisation de l'unité vh
(Viewport Height) pour dimensionner
les hauteurs de ligne. On peut ainsi faire en sorte que la grille occupe toute la hauteur de l'écran
(100 vh).
Syntaxes de grid-template-rows
.
- grid-template-rows: none;
Valeur par défaut. 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. - grid-template-rows: auto auto auto;
Trois lignes sont créées dans la grille (puisqu'il y a trois valeurs énumérées). La hauteur de ces lignes est déterminée d'après la taille des contenus dans chacune des lignes.
- grid-template-rows: 100px 150px 100px;
L'énumération comporte trois valeurs, i 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 (voir les unités de dimensions en CSS). 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;
Les valeurs
min-content
etmax-content
sont normalement acceptées par la syntaxe, mais leur effet semble ma défini pour le dimensionnement des lignes. - 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 et des limites indiquées.
Pour une description plus précise de leur fonctionnement, reportez-vous aux pages sur les fonctions
minmax()
etfit-content()
. - grid-template-rows: repeat(10,50px);
la fonction
repeat()
permet de raccourcir la déclaration de lignes nombreuses avec des hauteurs identiques. - grid-template-rows:
initial
;La valeur initiale est
none
. -
Reportez-vous à la description générale de ces valeurs.
Simulateur.
grid-template-rows
:
-ms-grid-rows
:
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é).
La prise en charge des grilles est globalement assez bonne, sauf pour Internet explorer qui traite
les propriétés relatives aux grilles de façon différente.
Reportez-vous à la page sur la propriété grid
pour une description plus détaillée
des problèmes de compatibilité avec IE.
Afficher le tableau de compatibilité (informations fournies par canIuse.com).
Voir aussi...
Grilles - Propriétés.
align-content
: Disposition des lignes dans un flex-box ou une grille.align-items
: Disposition verticale des éléments dans un flex-box ou une grille.align-self
: Position verticale de l'un des éléments dans un flex-box ou une grille.grid
: Propriété raccourcis définissant les principaux paramètres d'une grille.grid-area
: Positionne un élément dans une zone nommée de la grille.grid-auto-columns
: Mode de calcul des colonnes 'auto' dans une grille.grid-auto-flow
: Mode de calcul de l'emplacement des éléments dans la grille.grid-auto-rows
: Mode de calcul de la hauteur 'auto' des lignes dans une grille.grid-column
: Numéro de colonne(s) d'un élément dans une grille.grid-column-end
: Numéro de la colonne de fin d'un élément dans une grille.grid-column-gap
: Ajuste l'espacement des colonnes dans une grille.grid-column-start
: Numéro de la colonne de début d'un élément dans une grille.grid-gap
: Ajuste l'espacement des lignes et des colonnes dans une grille.grid-row
: Numéro des lignes d'un élément dans une grille.grid-row-end
: Numéro de la ligne de fin d'un élément dans une grille.grid-row-gap
: Ajuste l'espacement des lignes dans une grille.grid-row-start
: Numéro de la ligne de départ d'un élément dans une grille.grid-template
: Largeur des colonnes et hauteur des lignes d'une grille.grid-template-areas
: Définition de zones nommées dans une grillegrid-template-columns
: Définition du nombre et de la largeur des colonnes d'une grille.justify-content
: Définit le positionnement horizontal dans un flex-box ou une grille.justify-items
: Gère l'alignement horizontal des éléments dans le container flex-box ou grille.justify-self
: Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.