Proprietà CSS grid-column-end

Definizione e uso

L'attributo grid-column-end determina il numero di colonne che l'elemento coprirà o sulla quale linea di colonna (column-line) l'elemento finirà.

Vedi l'esempio alla fine della pagina.

Vedi anche:

Tutorial CSS:Layout a griglia CSS

Esempio

Esempio 1

Fai sì che "item1" copra tre colonne:

.item1 {
  grid-column-end: span 3;
}

Prova tu stesso

Esempio 2

Puoi usare il valore della colonna lineare al posto del numero di colonne da coprire:

.item1 {
  grid-column-end: 3;
}

Prova tu stesso

Sintassi CSS

grid-column-end: auto|span n|column-line;

Valore dell'attributo

Valore Descrizione
auto Valore predefinito. Gli elementi copriranno una colonna.
span n Determina il numero di colonne che l'elemento coprirà.
column-line Determina in quale colonna fermare la visualizzazione degli elementi.

Dettagli tecnici

Valore predefinito: auto
Ereditarietà: No
Produzione di animazioni: Supportato. Si prega di consultare:Proprietà correlate agli animazioni.
Versione: Modulo di Layout a Griglia CSS Livello 1
Sintassi JavaScript: object.style.gridColumnEnd="5"

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