CSS grid-template ominaisuus

Määrittely ja käyttö

grid-template -ominaisuus on seuraavien ominaisuuksien lyhennetty muoto:

Katso myös:

CSS oppituntiohje:CSS ruudukko projektit

CSS viittausopas:grid-area -ominaisuus

CSS viittausopas:grid-template-rows -ominaisuus

CSS viittausopas:grid-template-columns -ominaisuus

CSS viittausopas:grid-template-areas -ominaisuus

Esimerkki

Esimerkki 1

Luo ensimmäinen sarakkeen 150 pikselin korkea kolmikkosarakkeistojärjestely:

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Kokeile itse

Esimerkki 2

Määritellään kaksi riviä, joista "item1" kattaa ensimmäisten kahden rivin ensimmäiset kaksi saraketta (viiden sarakkeen verkkoasennuksessa):

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

Kokeile itse

Esimerkki 3

Nimeä kaikki kohteet ja luo valmis verkkosivumalli:

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Kokeile itse

CSS-kieli

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Ominaisuuden arvo
Arvo Kuvaus
none Oletusarvo. Ei määritellä saraketta tai riviä.
grid-template-rows / grid-template-columns Määritellään sarake- ja rivin mitat.
grid-template-areas Määritellään nimettyjen kohteiden verkkorakennus.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso: initial.
inherit Perii tämän ominaisuuden vanhemmalta elementiltään. Katso: inherit.

Tekninen yksityiskohta

Oletusarvo: none none none
Perintä: Ei
Animaation tekijä: Tuki. Katso:Animaatiotutkijat.
Versio: CSS Grid Layout Module Level 1
JavaScript-kieli: object.style.gridTemplate="250px / auto auto"

Selaimen tuki

Taulukossa olevat numerot antavat tiedon ensimmäisestä selaimesta, joka tukee tätä ominaisuutta täysin.

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