Proprietà grid-column CSS

Definizione e uso

L'attributo grid-column definisce la dimensione dell'elemento di griglia e la sua posizione nel layout della griglia, è un attributo abbreviato per i seguenti attributi:

Vedi anche:

Corso CSS:Layout a griglia CSS

Esempio

Esempio 1

Fai sì che "item1" inizi dalla colonna 1 e attraversi due colonne:

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

Prova da solo

Esempio 2

Puoi usare i valori delle linee di colonna al posto del numero di colonne da superare:

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

Prova da solo

Sintassi CSS

grid-column: grid-column-start / grid-column-end;

Valore dell'attributo

Valore Descrizione
grid-column-start Stabilisce da quale colonna iniziare la visualizzazione degli elementi.
grid-column-end Stabilisce su quale linea di colonna fermare la visualizzazione degli elementi, o per quanti colonne superare.

Dettagli tecnici

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

Supporto del browser

I numeri nel tavolo indicano la versione del browser iniziale che supporta completamente questa proprietà.

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