grid-template-rows

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.

/* 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;

Syntaxe

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.

<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 comme auto.

<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 minimale auto est implicite (la valeur signifie minmax(auto, <flex>)).

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 et max. Si max 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és align-content et justify-content.

fit-content( [ <length> | <percentage> ] )

Cette notation représente la formule min(max-content, max(auto, argument)) qui est calculée comme pour auto (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 par auto.

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>
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>?
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

Compatibilité des navigateurs

[1] Cette fonctionnalité pouvait être activée à partir de Chrome 29.0 via le marqueur fonctionnalités expérimentales de la Web Platform sous chrome://flags.

[2] Cette fonctionnalité est implémentée via la préférence layout.css.grid.enabled qui vaut false par défaut depuis Gecko 40 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37). Depuis Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48), la fonction fit-content() est prise en charge. Depuis Gecko 52 ((Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49)), la préférence est activée par défaut.

[3] Internet Explorer implémente une ancienne version de la spécification qui utilise le préfixe -ms. La propriété qui est implémentée peut être utilisée avec -ms-grid-rows.

[4] Cette fonctionnalité est disponible via la préférence Activer les fonctionnalités expérimentales de la plateforme web sous chrome://flags depuis Opera 28.0.

[5] Implémentation expérimentale disponible via Safari Technology Preview.

Voir aussi

• grid-template-columns
• grid-template-areas
• grid-template
• Guide : les concepts de base pour les grilles CSS : les pistes
• Tutoriel vidéo : définir une grille (en anglais)