Proprietà CSS grid-row

Definizione e uso

L'attributo grid-row definisce la dimensione degli elementi di griglia e la loro posizione nel layout a griglia, ed è un'abbreviazione delle seguenti proprietà:

Vedi anche:

Tutorial CSS:Layout a griglia CSS

Esempio

Esempio 1

Fai sì che "item1" inizi alla riga 1 e attraversi due righe:

.item1 {
  grid-row: 1 / span 2;
}

Prova tu stesso

Esempio 2

Puoi usare il valore della linea di riga per sostituire il numero di righe da attraversare:

.item1 {
  grid-row: 1 / 3;
}

Prova tu stesso

Sintassi CSS

grid-row: grid-row-start / grid-row-end;

Valore dell'attributo

Valore Descrizione
grid-row-start Determina da quale riga iniziare la visualizzazione degli elementi.
grid-row-end Determina su quale linea di riga fermare la visualizzazione degli elementi, o per quante righe attraversare.

Dettagli tecnici

Valore predefinito: auto / auto
Ereditarietà: No
Produzione di animazioni: Supportato. Vedi anche:Proprietà correlate agli animazioni.
Versione: Modulo di Layout a Griglia CSS Livello 1
Sintassi JavaScript: object.style.gridRow="2 / span 2"

Supporto del browser

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

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