CSS grid-column-end eigenschap

Definitie en gebruik

Het grid-column-end-eigenschap bepaalt hoeveel kolommen het item overspant, of waar het item op de kolomlijn (column-line) eindigt.

Zie de voorbeelden aan het einde van de pagina.

Zie ook:

CSS handleiding:CSS grid layout

Voorbeeld

Voorbeeld 1

Maak "item1" over drie kolommen heen lopen:

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

Probeer het zelf

Voorbeeld 2

U kunt de kolomlijnwaarde gebruiken in plaats van het aantal kolommen dat het item overspant:

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

Probeer het zelf

CSS syntaxis

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

Eigenschapswaarde

Waarde Beschrijving
auto Standaardwaarde. Het item overspant één kolom.
span n Bepaalt het aantal kolommen dat het item overbrugt.
column-line Bepaalt op welke kolom de weergave van items stopt.

Technische details

Standaardwaarde: auto
Inherit: Nee
Animatie maken: Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS Grid Layout Module Level 1
JavaScript syntaxis: object.style.gridColumnEnd="5"

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