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
selettore {
grid-auto-rows: altezza riga;
}
Esempio
Definiamo l'altezza delle righe per i nostri elementi nella griglia implicita:
<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;
}
:
Vedi anche
-
la proprietà
grid-auto-columns,
che definisce il numero e la larghezza delle colonne nella griglia implicita -
la proprietà
grid-template-rows,
che definisce il numero e l'altezza delle righe nella griglia
