CSS grid-column ominaisuus

Määrittely ja käyttö

grid-column-ominaisuus määrittää verkkoprojektin koon ja sijainnin verkkorakennelmassa, ja se on seuraavien ominaisuuksien lyhennys:

Katso myös:

CSS-opas:CSS-verkkorakennelma

Esimerkki

Esimerkki 1

Aseta "item1" alkamaan sarjasta 1 ja kattamaan kaksi sarjaa:

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

Kokeile itse

Esimerkki 2

Voit käyttää tarkistusviivaväliä korvaamaan ylittävien sarjojen määrän:

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

Kokeile itse

CSS-kieli

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

Ominaisuusarvo

Arvo Kuvaus
grid-column-start Määrittää, mistä sarjasta projektin näyttäminen alkaa.
grid-column-end Määrittää, missä tarkistusviivassa (column-line) projektin näyttäminen loppuu, tai kuinka monta sarjaa se kattaa.

Tekninen yksityiskohta

Oletusarvo: auto / auto
Perintä: Ei
Animaation tekijä: Tuki. Katso myös:Animaatiot.
Versio: CSS Grid Layout Module Level 1
JavaScript-kieli: object.style.gridColumn="2 / span 2"

Selaintuki

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

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