CSS row-gap ominaisuus

Määrittely ja käyttö

row-gap ominaisuus määrittää joustavan tai ruudukkoasettelun rivi välit.

row-gap ominaisuus tunnettiin aiemmin grid-row-gap.

Katso myös:

CSS opetusohjelma:CSS ruudukkoasettelu

CSS opetusohjelma:CSS joustava kehyksen asettelu

CSS viittausopas:gap ominaisuus

CSS viittausopas:column-gap ominaisuus

esimerkki

Esimerkki 1

Määrittää ruudukon rivi välit 50 pikseeliin:

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

Kokeile itse

Esimerkki 2: Joustava kehyksen asettelu

Asettaa joustavassa kehyksessä rivi välit 70px:ksi:

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

Kokeile itse

CSS-kieli

row-gap: length|normal|initial|inherit;
arvo kuvaus
length Asettaa rivien välisen etäisyyden tiettynä pituutena tai prosenttina.
normal Oletusarvo. Määrittää rivi välit normaalina.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Periisi tämän ominaisuuden vanhemmalta elementiltä. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: normal
perintä: ei
Animaation tekeminen: Tuki. Katso erilliset ominaisuudet. Katso myös:Animaatiot.
Versio: CSS Box Alignment Module Level 3
JavaScript-kieli: object.style.rowGap="50px"

Selaimen tuki

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

asettelu Chrome IE / Edge Firefox Safari Opera
verkkoon 66 16 61 12 53
joustavassa kehyksessä 84 84 63 14.1 70