CSS grid-column egenskap

Definition och användning

grid-column-egenskapen definierar storleken på en nätprojekt och dess plats i nätlayouten och är en förkortning för följande egenskaper:

Se också:

CSS-guide:CSS-grid

Exempel

Exempel 1

Låt "item1" börja på kolonn 1 och sträcka sig över två kolonner:

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

Prova själv

Exempel 2

Du kan använda kolonnlinjevärden istället för antalet kolonner att korsa:

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

Prova själv

CSS-syntax

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

Egenskapsvärde

Värde Beskrivning
grid-column-start Bestäm från vilket kolonn att visa projektet.
grid-column-end Bestäm var projektet ska stoppa att visas på vilken kolonnlinje (column-line) eller över hur många kolonner.

Tekniska detaljer

Standardvärde: auto / auto
Arv: Nej
Animation tillverkningsmetod: Stöd. Se till:Animationsrelaterade egenskaper.
Version: CSS Grid Layout Module Level 1
JavaScript-syntax: object.style.gridColumn="2 / span 2"

Webbläsarstöd

Bilagor på tabellen anger den första webbläsarversion som helt stöder egenskapen.

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