Proprietà grid-auto-rows

La proprietà grid-auto-rows definisce il numero e l'altezza delle righe che un elemento occuperà nella griglia implicita. Griglia implicita - una griglia che viene creata automaticamente quando gli elementi escono dai confini della griglia già definita. Nel valore della proprietà specifichiamo l'altezza delle righe in qualsiasi unità di misura. La proprietà viene specificata nell'elemento genitore e determina l'altezza delle righe degli elementi figli.

Sintassi

cssselettore {
  grid-auto-rows: altezza riga;
}

Esempio

Definiamo l'altezza delle righe per i nostri elementi nella griglia implicita:

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

Результат:

Vedi anche