Propiedad grid-auto-rows

La propiedad grid-auto-rows establece la cantidad y altura de las filas que ocupará un elemento en la cuadrícula implícita. Cuadrícula implícita - cuadrícula que se crea automáticamente cuando los elementos salen de los límites de la cuadrícula ya definida. En el valor de la propiedad indicamos la altura de las filas en cualquier unidad de medida. La propiedad se especifica en el elemento padre y determina la altura de las filas de los elementos hijos.

Sintaxis

selector {
	grid-auto-rows: altura de fila;
}

Ejemplo

Establezcamos la altura de las filas para nuestros elementos en la cuadrícula implícita:

<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;
}

Véase también

propiedad grid-auto-columns,
que establece la cantidad y anchura de columnas en la cuadrícula implícita
propiedad grid-template-rows,
que establece la cantidad y altura de filas en la cuadrícula