La propriétéCSSgrid-auto-rows définit la taille d'une ligne de grille créée implicitement, d'unepiste ou d'un motif de pistes.

Exemple interactif

grid-auto-rows: auto;

grid-auto-rows: 50px;

grid-auto-rows: min-content;

grid-auto-rows: minmax(30px, auto);

<section>  <div>    <div>      <div>Un</div>      <div>Deux</div>      <div>Trois</div>      <div>Quatre</div>      <div>Cinq</div>    </div>  </div></section>

#example-element {  border: 1px solid #c5c5c5;  display: grid;  grid-template-columns: 1fr 1fr;  grid-auto-rows: 40px;  grid-gap: 10px;  width: 220px;}#example-element > div {  background-color: rgb(0 0 255 / 0.2);  border: 3px solid blue;  font-size: 22px;}#example-element div:last-child {  font-size: 13px;}

Si un élément de la grille est positionné sur une ligne dont la taille n'est pas explicitement définie avecgrid-template-rows, une piste implicite de lagrille est créée pour le contenir. Cela peut se produire soit en positionnant explicitement un élément sur une ligne hors plage, soit lorsque l'algorithme de placement automatique crée 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 type <length> */grid-auto-rows: 100px;grid-auto-rows: 20cm;grid-auto-rows: 50vmax;/* Valeurs de type <percentage> */grid-auto-rows: 10%;grid-auto-rows: 33.3%;/* Valeurs de type <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: revert;grid-auto-rows: revert-layer;grid-auto-rows: unset;

Valeurs

<length>

Une longueur positive.

<percentage>

Un pourcentage (<percentage>) 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 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 notationminmax(), 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 entremin 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

Comme maximum, cela représente la plus grande taillemax-content des éléments sur cette piste.

Comme minimum, cela représente la plus grande des tailles minimales des éléments sur cette piste (définie parmin-width/min-height des éléments). Il s'agit souvent, mais pas toujours, de la taillemin-content.

Si utilisé en dehors de la notationminmax(),auto représente l'intervalle entre le minimum et le maximum décrit ci-dessus. Cela se comporte de façon similaire àminmax(min-content,max-content) dans la plupart des cas.

Note :Les pistes de tailleauto (et uniquement celles-ci) peuvent être étirées grâce aux propriétésalign-content etjustify-content. Par défaut, une piste dimensionnée enauto occupera tout l'espace restant dans le conteneur de la grille.

Définition formelle

Syntaxe formelle

grid-auto-rows =
<track-size>+

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

<track-breadth> =
<length-percentage [0,∞]>|
<flex [0,∞]>|
min-content|
max-content|
auto

<inflexible-breadth> =
<length-percentage [0,∞]>|
min-content|
max-content|
auto

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

Exemples

Définir la taille des lignes de la grille

HTML

<div>  <div></div>  <div></div>  <div></div></div>

CSS

#grid {  width: 200px;  display: grid;  grid-template-areas: "a a";  grid-gap: 10px;  grid-auto-rows: 100px;}#grid > div {  background-color: lime;}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriétégrid-auto-columns
• La propriétégrid-auto-flow
• La propriétégrid
• Le placement automatique sur la grille - dimensionner les lignes de la grille implicite
• Vidéo :Introduction au placement automatique sur la grille et à l'ordre des éléments^(angl.)