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.

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(100px, auto);
grid-auto-rows: minmax(max-content, 2fr);
grid-auto-rows: minmax(20%, 80vmax);

/* Gestion de plusieurs pistes */
grid-auto-rows: min-content max-content auto;
grid-auto-rows: 100px 150px 390px;
​​​​​​​grid-auto-rows: 10% 33.3%;
grid-auto-rows: 0.5fr 3fr 1fr;
​​​​​​​grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);


/* 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 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. 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és align-content et justify-content.

Syntaxe formelle

<track-size>+


<track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )


<track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto
<inflexible-breadth> = <length> | <percentage> | min-content | max-content | auto


<length-percentage> = <length> | <percentage>

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.
Candidat au statut de recommandation Définition initiale.

Valeur initialeauto
Applicabilitéconteneurs de grille
Héritéenon
Pourcentagesfait référence à la dimension correspondante de la zone de contenu
Médiavisuel
Valeur calculéele pourcentage tel que spécifé ou une longeur absolue
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 16
Support complet 16
Support complet 12
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -ms-grid-rows
Firefox Support complet 52
Support complet 52
Support complet 40
Désactivée
Désactivée From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Support complet 10
Autre nom
Support complet 10
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -ms-grid-rows
Opera Support complet 44
Support complet 44
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1WebView Android Support complet 57Chrome Android Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Mobile Support complet 16
Support complet 16
Support complet 12
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -ms-grid-rows
Firefox Android Support complet 52
Support complet 52
Support complet 40
Désactivée
Désactivée From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet 44Safari iOS Support complet 10.3Samsung Internet Android Support complet 6.0

Légende

Support complet  
Support complet
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,