CSS ruudukkomuotoilun esimerkki
- Edellinen sivu CSS ruudukkomuotoilujäsen
- Seuraava sivu CSS esimerkki
Alasijat (projektit)
Verkkokontti sisältää verkkoprosjekteja.
Oletuksena kontti sisältää verkkoprojekteja jokaisella rivillä ja sarakkeella, mutta voit asettaa projektien tyylit, jotta ne voivat kattaa useita sarakkeita ja/tai rivejä.
grid-column ominaisuus:
grid-column
Ominaisuus määrittää, mihin sarakkeeseen projekti sijoitetaan.
voit määrittää kohteen alkuperän ja päättymispaikan.
Jokaisen rivin sarakkeet määritetään paransivussa ja erotetaan välilyönneillä.grid-column
Ominaisuus on grid-column-start- ja grid-column-end-ominaisuuksien lyhennys.
Jos haluat sijoittaa tietyn projektin, voit käyttää rivinumeroa (line numbers) tai avainsanaa "span" määrittääksesi, kuinka monta saraketta projekti kattaa.
Esimerkki
tekee "item1" alkavan ensimmäisestä sarakkeesta ja päättyen ennen viidettä saraketta:
Tee "myArea" kattamaan viisi saraketta viidessä ruudukkoasennuksessa (pisteet edustavat nimeättömiä projektteja): grid-column: 1 / 5; }
Esimerkki
tekee "item1" alkavan ensimmäisestä sarakkeesta ja kattamaan 3 saraketta:
Tee "myArea" kattamaan viisi saraketta viidessä ruudukkoasennuksessa (pisteet edustavat nimeättömiä projektteja): grid-column: 1 / span 3; }
Esimerkki
tekee "item2" alkavan toisesta sarakkeesta ja kattamaan 3 saraketta:
.item2 { grid-column: 2 / span 3; }
grid-row ominaisuus:
grid-row
ominaisuus määrittää, mihin riville kohteen asetetaan.
voit määrittää kohteen alkuperän ja päättymispaikan.
Jokaisen rivin sarakkeet määritetään paransivussa ja erotetaan välilyönneillä.grid-row
ominaisuus on grid-row-start ja grid-row-end ominaisuuksien lyhenne.
asettaaksesi kohteita, voit käyttää rivinumeroa tai käyttää avainsanaa "span" määrittääksesi, kuinka monta riviä kohteella kattaa:
Esimerkki
tekee "item1" alkavan riviriviltä 1 ja päättyen riviriville 4:
Tee "myArea" kattamaan viisi saraketta viidessä ruudukkoasennuksessa (pisteet edustavat nimeättömiä projektteja): grid-row: 1 / 4; }
Esimerkki
tekee "item1" alkavan ensimmäisestä rivistä ja kattamaan 2 riviä:
Tee "myArea" kattamaan viisi saraketta viidessä ruudukkoasennuksessa (pisteet edustavat nimeättömiä projektteja): grid-row: 1 / span 2; }
grid-area ominaisuus
grid-area
ominaisuus voidaan käyttää grid-row-start, grid-column-start, grid-row-end ja grid-column-end ominaisuuksien lyhenteenä.
Esimerkki
tekee "item8" alkavan riviriviltä 1 ja sarakkeet alkaen ja päättyen riviriville 5 ja sarakkeeseen 6:
.item8 { grid-area: 1 / 2 / 5 / 6; }
Esimerkki
tekee "item8" alkavan riviriviltä 2 ja sarakkeet alkaen ja se kattaa 2 riviä ja 3 saraketta:
.item8 { grid-area: 2 / 1 / span 2 / span 3; }
nimetty ruudukkoelementti
grid-area
ominaisuus voidaan käyttää myös nimettyjen ruudukko-elementtien nimeämiseen.
voidaan käyttää ruudukkoytimen grid-template-areas
ominaisuus viittaa nimettyyn ruudukko-elementtiin.
Esimerkki
item1:nimi on "myArea" ja se kattaa viiden sarakkeen ruudukkoasettelun kaikki viisi saraketta:
Tee "myArea" kattamaan viisi saraketta viidessä ruudukkoasennuksessa (pisteet edustavat nimeättömiä projektteja): .item1 { } .grid-container { grid-template-areas: 'myArea myArea myArea myArea myArea'; }
Jokainen rivi määritetään paransivulla (' ').
Jokainen rivi määritetään paransivulla (' ').
Jokaisen rivin sarakkeet määritetään paransivussa ja erotetaan välilyönneillä.Huomautus:
Esimerkki
Pisteet edustavat nimeättömiä ruudukkoasioita.
Tee "myArea" kattamaan viisi saraketta viidessä ruudukkoasennuksessa (pisteet edustavat nimeättömiä projektteja): .item1 { } .grid-container { grid-area: myArea; }
grid-template-areas: 'myArea myArea . . .';
Esimerkki
Jos haluat määrittää kaksi riviä, määritä toisen rivin sarakkeet toisessa paransivussa:
.grid-container { grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .'; }
Esimerkki
Nimeä kaikki projektit ja luo käytettävissä oleva verkkosivumalli:
.item1 { grid-area: header; } .item2 { grid-area: menu; } .item3 { grid-area: main; } .item4 { grid-area: right; } .item5 { grid-area: footer; } .grid-container { grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer'; }
Projektien järjestys
Verkkorakennetyyli mahdollistaa projektien sijoittamisen haluamaamme sijaintiin.
HTML-koodin ensimmäinen kohta ei tarvitse näkyä verkkorakenteen ensimmäisenä.
Esimerkki
.item1 { grid-area: 1 / 3 / 2 / 4; } .item2 { grid-area: 2 / 3 / 3 / 4; } .item3 { grid-area: 1 / 1 / 2 / 2; } .item4 { grid-area: 1 / 2 / 2 / 3; } .item5 { grid-area: 2 / 1 / 3 / 2; } .item6 { grid-area: 2 / 2 / 3 / 3; }
Voit järjestää tiettyjen näyttökokojen järjestystä käyttämällä media-kyselyä:
Esimerkki
@media only screen and (max-width: 500px) { .item1 { grid-area: 1 / span 3 / 2 / 4; } .item2 { grid-area: 3 / 3 / 4 / 4; } .item3 { grid-area: 2 / 1 / 3 / 2; } .item4 { grid-area: 2 / 2 / span 2 / 3; } .item5 { grid-area: 3 / 1 / 4 / 2; } .item6 { grid-area: 2 / 3 / 3 / 4; } }
- Edellinen sivu CSS ruudukkomuotoilujäsen
- Seuraava sivu CSS esimerkki