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

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

Ejemplo

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

html<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>

css#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