CSS ruudukko ominaisuus

edellinen sivu pala
Seuraava sivu grid-area

Määritelmä ja käyttö

grid-ominaisuus on seuraavien ominaisuuksien lyhennetty muoto:

Katso myös:

Esimerkki

Esimerkki 1

Luo kolmen sarakkeen verkkoasettelu, jossa ensimmäisen rivin korkeus on 150 pikseliä:

.grid-container {
  display: grid;
  grid: 150px / auto auto auto;
"menu alatunniste alatunniste alatunniste oikea oikea"

}

Esimerkki 2

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

.item1 {
  grid-area: myArea;
"menu alatunniste alatunniste alatunniste oikea oikea"
.grid-container {
  display: grid;
  grid:
    myArea myArea ...
    myArea myArea ...;
"menu alatunniste alatunniste alatunniste oikea oikea"

}

Esimerkki 3

Nimeä kaikki projektit 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:
    header header header header header
    'menu main main main right right'
    "menu pää pää pää oikea oikea"
"menu alatunniste alatunniste alatunniste oikea oikea"

}

Kokeile itse

CSS syntaksigrid-template-rows / grid-template-columnsgrid: none|grid-template-areasgrid: none|grid-template-rows |grid-auto-flow[ grid-auto-columns/ [grid-auto-flow[ grid-auto-rows / grid-template-columns]

Ominaisuuden arvo |initial|inherit;

Arvo	Kuvaus
none	Oletusarvo. Määrittelemättä rivejä tai sarakkeita.
grid-template-rows / grid-template-columns	Määritellään sarakkeiden ja rivien mitat.
grid-template-areas	Määritellään nimettyjen kohteiden käyttämä ruudukkoasettelu.
grid-template-rows / grid-auto-columns	Määritellään rivien mitat (korkeus) ja sarakkeiden automaattiset mitat.
grid-auto-rows / grid-template-columns	Määritellään rivien automaattiset mitat ja asetetaan grid-template-columns ominaisuus.
grid-template-rows / grid-auto-flow grid-auto-columns	Määritellään rivien mitat (korkeus), miten sijoitetaan automaattisesti sijoitetut kohteet ja sarakkeiden automaattiset mitat.
grid-auto-flow grid-auto-rows / grid-template-columns	Määritellään, miten sijoitetaan automaattisesti sijoitetut kohteet, rivien automaattiset mitat ja asetetaan grid-template-columns ominaisuus.
initial	Aseta tämä ominaisuus sen oletusarvon arvoon. Katso myös: initial.
inherit	Periisi tämä ominaisuus vanhemmalta elementiltä. Katso myös: inherit.

Tekninen yksityiskohta

Oletusarvo:	none none none auto auto row
Perintä:	ei
Animaation tekeminen:	kyllä, katso yksittäiset ominaisuudet. Katso myös:Animaatiot.
Versio:	CSS Grid Layout Moduuli Taso 1
JavaScript syntaksi:	object.style.grid="250px / auto auto auto"