Proprietà CSS grid-template-rows

Definizione e uso

grid-template-rows definisce il numero di righe (e l'altezza) nella layout di griglia.

Il valore è una lista separata da spazi, in cui ogni valore specifica l'altezza della rispettiva riga.

Vedi anche:

Guida CSS:Layout di griglia CSS

Manuale di riferimento CSS:Proprietà grid-columns

Manuale di riferimento CSS:Proprietà grid-template

Esempio

Definisci la dimensione della riga (altezza):

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Prova da solo

Sintassi CSS

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Valore dell'attributo

Valore Descrizione
none Non impostata la dimensione. Crea la riga quando necessario.
auto La dimensione della riga dipende dalle dimensioni del contenitore e dalla dimensione del contenuto degli elementi nella riga.
max-content Imposta la dimensione di ogni riga in base al contenuto massimo dell'elemento nella riga.
min-content Imposta la dimensione di ogni riga in base al contenuto minimo dell'elemento nella riga.
length Imposta la dimensione della riga utilizzando valori di lunghezza validi. VediUnità di lunghezza.

Dettagli tecnici

Valore predefinito: none
Ereditarietà: No
Produzione di animazione: Supportato. Vedi:Proprietà correlate all'animazione.
Versione: Modulo Layout di Griglia CSS Livello 1
Sintassi JavaScript: object.style.gridTemplateRows="50px 200px"

Supporto del browser

I numeri nella tabella indicano la versione del browser iniziale che supporta interamente questa proprietà.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44