CSS grid-column-end egenskap

Definition och användning

grid-column-end-egenskapen bestämmer hur många kolonner objektet kommer att korsa, eller på vilket kolonnlinje (column-line) objektet kommer att avslutas.

Se exempel vid sidfoten.

Se också:

CSS-handbok:CSS-grid

Exempel

Exempel 1

Låt "item1" korsa tre kolonner:

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

Prova själv

Exempel 2

Du kan använda kolonnlinjvärdet istället för antalet kolonner att korsa:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
auto Standardvärde. Objektet kommer att korsa ett kolonn.
span n Bestämmer antalet kolonner som objektet kommer att korsa.
column-line Bestämmer på vilket kolonn att avsluta visningen av objektet.

Tekniska detaljer

Standardvärde: auto
Arv: Nej
Animeringsproduktion: Stöds. Se vidare:Animeringsrelaterade egenskaper.
Version: CSS Grid Layout Module Level 1
JavaScript-syntax: object.style.gridColumnEnd="5"

Webbläsarstöd

De siffror i tabellen anger den första webbläsarversion som helt stöder egenskapen.

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