La propriété grid-template-rows
définit les noms des lignes et les fonctions de taille (track sizing) pour les lignes de la grille.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
/* Valeur avec un mot-clé */
grid-template-rows: none;
/* Valeurs avec une liste de pistes */
/* Type <track-list> */
grid-template-rows: 100px 1fr;
grid-template-rows: [linename] 100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
/* Valeurs <auto-track-list> */
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows: minmax(100px, max-content)
repeat(auto-fill, 200px) 20%;
grid-template-rows: [linename1] 100px [linename2]
repeat(auto-fit, [linename3 linename4] 300px)
100px;
grid-template-rows: [linename1 linename2] 100px
repeat(auto-fit, [linename1] 300px) [linename3];
/* Valeurs globales */
grid-template-rows: inherit;
grid-template-rows: initial;
grid-template-rows: unset;
Cette propriété peut être définie avec le mot-clé none
ou avec une valeur de type <track-list>
ou avec une valeur de type <auto-track-list>
.
Valeurs
none
- Un mot-clé qui indique qu'il n'y a pas de grille explicite. N'importe quelle ligne sera générée implicitement et sa taille sera déterminée grâce à la propriété
grid-auto-rows
. <length>
- Un longueur positive (type
<length>
). <percentage>
- Un pourcentage positif (type
<percentage>
) relatif à la taille du bloc du conteneur de la grille. Si cette taille n'est pas définie, la valeur est traitée commeauto
. <flex>
- Une dimension positive dont l'unité
fr
indique le facteur de flexibilité de la piste. Chaque piste dimensionnée avec<flex>
occupera une partie de l'espace restant en fonction de ce facteur.Lorsque cette valeur apparaît en dehors de la notation
minmax()
, la valeur minimaleauto
est implicite (la valeur signifieminmax(auto, <flex>)
). Voir<flex_value>
. max-content
- Un mot-clé qui représente la plus grande des contributions maximales de contenu aux objets de la grilles qui occupe la piste de la grille.
min-content
- Un mot-clé qui représente la plus grande des contributions minimales de contenu aux objets de la grilles qui occupe la piste de la grille.
minmax(min, max)
- Une notation fonctionnelle qui définit un intervalle de taille entre
min
etmax
. Simax
est inférieur àmin
,max
est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur<flex>
qui définit le facteur de flexibilité de la piste. Cette notation est invalide en tant que minimum. auto
- Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par
min-width
/min-height
)) des objets de la grilles qui occupe cette piste de la grille. -
Note : Les pistes de taille
auto
(et uniquement celles-ci) peuvent être étirées grâce aux propriétésalign-content
etjustify-content
. fit-content( [ <length> | <percentage> ] )
- Cette notation représente la formule
min(max-content, max(auto, argument))
qui est calculée comme pourauto
(i.e.minmax(auto, max-content)
) sauf que la taille de la piste est ramenée à argument si elle est plus grande que le minimum fourni parauto
. repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> )
- Représente un fragment répété d'une liste de pistes, cela permet de gérer des grilles avec de nombreuses lignes pour lesquelles on réutilise un motif.
Syntaxe formelle
none | <track-list> | <auto-track-list> | subgrid <line-name-list>?où
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<line-name-list> = [ <line-names> | <name-repeat> ]+où
<line-names> = '[' <custom-ident>* ']'
<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )
<track-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )
<fixed-size> = <fixed-breadth> | minmax( <fixed-breadth> , <track-breadth> ) | minmax( <inflexible-breadth> , <fixed-breadth> )
<fixed-repeat> = repeat( [ <positive-integer> ] , [ <line-names>? <fixed-size> ]+ <line-names>? )
<auto-repeat> = repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )où
<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto
<fixed-breadth> = <length-percentage>où
<length-percentage> = <length> | <percentage>
Exemples
CSS
#grid {
display: grid;
height: 100px;
grid-template-rows: 30px 1fr;
}
#areaA {
background-color: lime;
}
#areaB {
background-color: yellow;
}
HTML
<div id="grid">
<div id="areaA">A</div>
<div id="areaB">B</div>
</div>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Grid Layout La définition de 'grid-template-rows' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
Valeur initiale | none |
---|---|
Applicabilité | conteneurs de grille |
Héritée | non |
Pourcentages | fait référence à la dimension correspondante de la zone de contenu |
Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
Type d'animation | simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list |
Compatibilité des navigateurs
BCD tables only load in the browser