CSS ruudukkomuotoilun esimerkki

1
2
3
4
5

Kokeile itse

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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;
}

Kokeile itse

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;
}

Kokeile itse

Esimerkki

tekee "item2" alkavan toisesta sarakkeesta ja kattamaan 3 saraketta:

.item2 {
  grid-column: 2 / span 3;
}

Kokeile itse

grid-row ominaisuus:

grid-row ominaisuus määrittää, mihin riville kohteen asetetaan.

voit määrittää kohteen alkuperän ja päättymispaikan.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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;
}

Kokeile itse

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;
}

Kokeile itse

grid-area ominaisuus

grid-area ominaisuus voidaan käyttää grid-row-start, grid-column-start, grid-row-end ja grid-column-end ominaisuuksien lyhenteenä.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Esimerkki

tekee "item8" alkavan riviriviltä 1 ja sarakkeet alkaen ja päättyen riviriville 5 ja sarakkeeseen 6:

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

Kokeile itse

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;
}

Kokeile itse

nimetty ruudukkoelementti

grid-area ominaisuus voidaan käyttää myös nimettyjen ruudukko-elementtien nimeämiseen.

Header
Menu
Main
Right
Footer

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';
}

Kokeile itse

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;
} 

Kokeile itse

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 . . .';
} 

Kokeile itse

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';
} 

Kokeile itse

Projektien järjestys

Verkkorakennetyyli mahdollistaa projektien sijoittamisen haluamaamme sijaintiin.

HTML-koodin ensimmäinen kohta ei tarvitse näkyä verkkorakenteen ensimmäisenä.

1
2
3
4
5
6

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; }

Kokeile itse

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; }
}

Kokeile itse