CSS grid-gap ominaisuus

Määrittely ja käyttö

grid-gap ominaisuus määrittelee ruudukkoasennuksen rivien ja sarakkeiden välisen välimarginaalin koon, ja se on seuraavien ominaisuuksien lyhennetty muoto:

Huomaa:Tämä ominaisuus on nimetty uudelleen CSS3:ssa: gap.

Katso myös:

CSS oppitunti:CSS ruudukkoasennus

CSS viittausoppikirja:grip-row-gap ominaisuus

CSS viittausoppikirja:grip-column-gap ominaisuus

Esimerkki

Esimerkki 1

Aseta rivi- ja sarakevälin lyhennetty arvo 50 pikseliin:

.grid-container {
  grid-gap: 50px;
}

Kokeile itse

Esimerkki 2

Aseta riviväli 20 pikseliä ja sarakeväli 50 pikseliä:

.grid-container {
  grid-gap: 20px 50px;
}

Kokeile itse

CSS-kieli

grid-gap: grid-row-gap grid-column-gap;

Ominaisuuden arvo

Arvo Kuvaus
grid-row-gap Aseta ruudukon asettelun rivivälin koko. Oletusarvo on 0.
grid-column-gap Aseta sarakevälin koko. Oletusarvo on 0.

Tekninen yksityiskohta

Oletusarvo: 0 0
Perintä: Ei
Animaation tekijä: Tuki. Katso myös:Animaatiot.
Versio: CSS Grid Layout Module Level 1
JavaScript-kieli: object.style.gridGap="50px 100px"

Selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee tätä ominaisuutta täysin.

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