1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
---
title: grid-template-rows
slug: Web/CSS/grid-template-rows
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/grid-template-rows
---
{{CSSRef}}
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.
{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}}
## Syntaxe
```css
/* 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é {{cssxref("grid-auto-rows")}}.
- `<length>`
- : Un longueur positive (type {{cssxref("<length>")}}).
- `<percentage>`
- : Un pourcentage positif (type {{cssxref("<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>)`). Voir {{cssxref("<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.
- {{cssxref("minmax()", "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 {{cssxref("min-width")}}/{{cssxref("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 {{cssxref("align-content")}} et {{cssxref("justify-content")}}.
- {{cssxref("fit-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`.
- {{cssxref("repeat()","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
{{csssyntax}}
## Exemples
### CSS
```css
#grid {
display: grid;
height: 100px;
grid-template-rows: 30px 1fr;
}
#areaA {
background-color: lime;
}
#areaB {
background-color: yellow;
}
```
### HTML
```html
<div id="grid">
<div id="areaA">A</div>
<div id="areaB">B</div>
</div>
```
### Résultat
{{EmbedLiveSample("Exemples", "40px", "100px")}}
## Spécifications
| Spécification | État | Commentaires |
| -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
| {{SpecName("CSS3 Grid", "#propdef-grid-template-rows", "grid-template-rows")}} | {{Spec2("CSS3 Grid")}} | Définition initiale. |
{{cssinfo}}
## Compatibilité des navigateurs
{{Compat("css.properties.grid-template-rows")}}
## Voir aussi
- {{cssxref("grid-template-columns")}}
- {{cssxref("grid-template-areas")}}
- {{cssxref("grid-template")}}
- [Guide : les concepts de base pour les grilles CSS : les pistes](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#les_pistes)
- Tutoriel vidéo : [définir une grille (en anglais)](https://gridbyexample.com/video/series-define-a-grid/)
|
