CSS grid-kolom eigenschap

Definitie en gebruik

De grid-column-eigenschap definieert de maat van het rasteritem en zijn positie in het rasterontwerp en is een afkorting van de volgende eigenschappen:

Zie ook:

CSS handleiding:CSS grid layout

Voorbeeld

Voorbeeld 1

Maak "item1" beginnen op kolom 1 en over twee kolommen heen lopen:

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

Probeer het zelf

Voorbeeld 2

Je kunt kolomlijnwaarden gebruiken in plaats van het aantal kolommen dat je wilt overspannen:

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

Probeer het zelf

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
grid-column-start Bepaalt vanaf welke kolom items worden weergegeven.
grid-column-end Bepaalt op welke kolomlijn (column-line) het weergeven van items stopt, of hoeveel kolommen het overspant.

Technische details

Standaardwaarde: auto / auto
Inheritance: Nee
Animatie maken: Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS Grid Layout Module Level 1
JavaScript syntaxis: object.style.gridColumn="2 / span 2"

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

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