Propriété grid-auto-rows

La propriété grid-auto-rows définit le nombre et la largeur des rangées que un élément occupera dans la grille implicite. Grille implicite - une grille qui est créée automatiquement lorsque les éléments dépassent le cadre de la grille déjà définie. Dans la valeur de la propriété, nous spécifions la largeur des rangées dans toutes unités de taille. La propriété est spécifiée dans l'élément parent et détermine la largeur des rangées des éléments enfants.

Syntaxe

sélecteur {
	grid-auto-rows: largeur de rangée;
}

Exemple

Définissons la largeur des rangées pour nos éléments dans la grille implicite :

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 200px;
	grid-auto-rows: 40px 60px 80px;
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voir aussi

la propriété grid-auto-columns,
qui définit le nombre et la largeur des colonnes dans la grille implicite
la propriété grid-template-rows,
qui définit le nombre et la largeur des rangées dans la grille