CSS gap ominaisuus

Määrittely ja käyttö

gap-ominaisuus määrittelee flexboxin, ruudukon tai useiden sarakkeiden asettelussa rivien ja sarakkeiden väliset välit. Se on seuraavien ominaisuuksien lyhennysominaisuus:

Huomaa:gap-ominaisuus tunnettiin aikaisemmin nimellä grid-gap.

Katso myös:

CSS oppituntien opas:CSS ruudukkoasetus

CSS oppituntien opas:CSS joustoruudukkoasetus

CSS oppituntien opas:CSS useiden sarakkeiden asetus

CSS viittausoppikirja:row-gap-ominaisuus

CSS viittausoppikirja:column-gap-ominaisuus

Esimerkki

Esimerkki 1

Aseta rivien ja sarakkeiden välinen etäisyys 50px:

.grid-container {
  gap: 50px;
}

Kokeile itse

Esimerkki 2: Ruudukkoasetus

Aseta ruudukkoasetteluun rivien välinen etäisyys 20px ja sarakkeiden välinen etäisyys 50px:

#grid-container {
  display: grid;
  gap: 20px 50px;
}

Kokeile itse

Esimerkki 3: Joustoruudukkoasetus

Aseta joustoruudukkoon rivien välinen etäisyys 20px ja sarakkeiden välinen etäisyys 70px:

#flex-container {
  display: flex;
  gap: 20px 70px;
}

Kokeile itse

Esimerkki 4: Useiden sarakkeiden asetus

Aseta useissa sarakkeissa sarakkeiden välinen etäisyys 50px:

#newspaper {
  columns: 3;
  gap: 50px;
}

Kokeile itse

CSS-kieli

gap: row-gap column-gap|initial|inherit;
Arvo Kuvaus
row-gap Aseta ruudukkojen tai joustoruudukkien asettelussa rivien väliset välit.
column-gap Aseta ruudukkojen, joustoruudukkien tai useiden sarakkeiden asettelussa sarakkeiden väliset välit.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso myös: initial.
inherit Periisi isältään tämän ominaisuuden. Katso myös: inherit.

Tekninen yksityiskohta

Oletusarvo: normal normal
Perintä: Ei
Animaatioiden luominen: Tuetu. Katso erityiset ominaisuudet. Katso myös:Animaatiotutkimukset.
Versio: CSS Box Alignment Module Level 3
JavaScript-kieli: object.style.gap="50px 100px"

Selaimen tuki

Taulukon numerot osoittavat ensimmäisen selitetyn selaimen version, joka tukee tätä ominaisuutta täysin.

Asetus Chrome IE / Edge Firefox Safari Opera
Ruudukossa 66 16 61 12 53
Joustoruudukossa 84 84 63 14.1 70
Useissa sarakkeissa 66 16 61 Ei tuettu 53