Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété grid-auto-rows
définit la taille d'une ligne de grille créée de façon implicite.
Si un élément de la grille est positionné sur une ligne dont la taille n'est pas explicitement définie avec grid-template-rows
, une piste implicite est créée pour contenir l'élément. Cela peut se produire lorsqu'on positionne un élément sur une ligne inexistante ou lorsque l'algorithme de placement automatique ajoute des lignes supplémentaires.
Valeur initiale | auto |
---|---|
Applicabilité | conteneurs de grille |
Héritée | non |
Pourcentages | voir grid-template-rows ou grid-template-columns |
Média | visuel |
Valeur calculée | voir grid-template-rows ou grid-template-columns |
Animable | non |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Valeurs avec un mot-clé */ grid-auto-rows: min-content; grid-auto-rows: max-content; grid-auto-rows: auto; /* Valeurs de longueur */ /* Type <length> */ grid-auto-rows: 100px; grid-auto-rows: 20cm; grid-auto-rows: 50vmax; /* Valeurs proportionnelles */ /* Type <percentage> */ grid-auto-rows: 10%; grid-auto-rows: 33.3%; /* Valeurs <flex> */ grid-auto-rows: 0.5fr; grid-auto-rows: 3fr; /* Valeurs minmax() */ grid-auto-rows: minmax(1fr, 300px); grid-auto-rows: minmax(max-content, 2fr); grid-auto-rows: minmax(20%, 80vmax); /* Valeurs globales */ grid-auto-rows: inherit; grid-auto-rows: initial; grid-auto-rows: unset;
Valeurs
<length>
- Une longueur positive (cf. type
<length>
. <percentage>
- Un pourcentage positif indiquant la taille de la ligne relativement à la taille du bloc qui contient la grille. Si la taille de ce bloc n'est pas définie, la valeur exprimée en pourcents est considéré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 minimaleauto
est implicite (la valeur signifieminmax(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
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. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal). 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
.
Syntaxe formelle
<track-size>où
<track-size> = <track-breadth> | minmax( <track-breadth> , <track-breadth> )
où
<track-breadth> = <length> | <percentage> | <flex> | min-content | max-content | auto
Exemples
CSS
#grid { width: 200px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-rows: 100px; } #grid > div { background-color: lime; }
HTML
<div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Grid Layout La définition de 'grid-auto-rows' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
Support simple | 29.0[1] | 40.0 (40.0)[2] | 10.0-ms[3] | 20-ms[3] | 28.0[1] | Nightly build-webkit |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | Pas de support | Pas de support | 10.0-ms[3] | Pas de support | Pas de support |
[1] Cette fonctionnalité est implémentée 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.
[3] Internet Explorer implémente une ancienne version de la spécification qui utilise le préfixe -ms. La propriété implémentée est donc -ms-grid-rows
.