CSS grid-template-rows ominaisuus

Määrittely ja käyttö

grid-template-rows määrittää ruudukkoyleiskuvassa olevien rivien määrän (ja korkeuden).

Arvot ovat välilyönnillä erotettu luettelo, jossa jokainen arvo määrittää vastaavan rivin korkeuden.

Lisäksi:

CSS oppitunnit:CSS ruudukkoyleiskatselu

CSS viittausopas:grid-columns ominaisuus

CSS viittausopas:grid-template-ominaisuus

Esimerkki

Määritä rivin mitat (korkeus):

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Kokeile itse

CSS-kieli

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Ominaisuuden arvo

Arvo Kuvaus
none Mitat eivät ole asetettu. Luo rivit tarvittaessa.
auto Rivien mitat riippuvat konttorin koosta ja rivissä olevien kohteiden koosta.
max-content Aseta jokaisen rivin mitat suurimmän projektin mukaan.
min-content Aseta jokaisen rivin mitat pienimmän projektin mukaan.
length Aseta rivien mitat käyttämällä laillisia pituusarvoja. KatsoPituusyksiköt.

Tekninen yksityiskohta

Oletusarvo: none
Perintä: Ei
Animaation tekeminen: TuenAnimaatiot.
Versio: CSS Grid Layout Module Level 1
JavaScript-kieli: object.style.gridTemplateRows="50px 200px"

Selaintuen

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

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