CSS grid-column-end ominaisuus

Määrittely ja käyttö

grid-column-end-ominaisuus määrittää, kuinka monta saraketta projekti ylittää, tai missä sarakeviivassa (column-line) projekti päättyy.

Katso esimerkit lopusta.

Katso myös:

CSS-opas:CSS-verkkoläpitys

Esimerkki

Esimerkki 1

Jätä "item1" kolme saraketta ylittäväksi:

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

Kokeile itse

Esimerkki 2

Voit käyttää sarakeviivaa korvata ylittävässä sarakkeessa olevan sarakkeen määrän:

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

Kokeile itse

CSS-kieli

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

Ominaisuusarvo

Arvo Kuvaus
auto Oletusarvo. Projekti kattaa yhden sarakkeen.
span n Määrittää, kuinka monta saraketta projekti kattaa.
column-line Määrittää, missä sarakkeessa projektin näyttäminen loppuu.

Tekninen yksityiskohta

Oletusarvo: auto
Perintä: Ei
Animaatioiden luominen: Tuki. Katso:Animaatiot.
Versio: CSS Grid Layout Module Level 1
JavaScript-kieli: object.style.gridColumnEnd="5"

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen selaimesversion, joka tukee tätä ominaisuutta täysin.

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