Tämä on kokoelma aloitusmalleja ulkoasuille ja malleille CSS-ruudukon avulla. Ajatuksena on esitellä, mitä tekniikka pystyy tekemään, ja tarjoamaan lähtökohdan, joka voidaan käyttää uudelleen muihin projekteihin.
Muista, että selaimen tuki Gridille on hyvä, mutta vaatii varajärjestelmiä vanhoille selaimille. Tämä tarkoittaa, että näiden suoraviivainen kopiointi ja liittäminen ei välttämättä sovi hyvin joihinkin käyttötapauksiin.
Pyhän Graalin asetteluKlassinen kolmen sarakkeen asettelu, jossa kaksi sivupalkkia ja runkokopiota pitävä säiliö on sijoitettu täyden leveyden otsikon ja alatunnisteen väliin.
Joustava Pyhä GraaliKaikki pysyy ehjänä, kun näkymäikkunan leveys muuttuu nestesäiliön avulla.
Katso Pen CSS Grid - Holy Grail 2, kirjoittanut Geoff Graham (@geoffgraham) CodePenistä.
Reagoiva Pyhä GraalAsiat pinotaan, kun näkymäikkuna kapenee.
Katso Pen CSS Grid: Holy Grail Layout - Reagoiva Geoff Graham (@geoffgraham) CodePenissä.
2 saraketta otsikossa ja alatunnisteessaKlassinen blogiasettelu, jossa yksi sarake on viestiä ja toinen sivupalkkia varten.
Joustavat 2 sarakettaAsettelu muuttuu hiljaiseksi, kun näkymä on kapea, mutta asettelu pysyy paikallaan.
Katso Pen CSS Grid: Header, Footer with 2-Column (Flexible), kirjoittanut Geoff Graham (@geoffgraham) CodePenistä.
Reagoiva 2 sarakettaAsiat pinotaan pienemmille näytöille.
Katso Pen CSS Grid: Header, Footer with 2-Column (Responsive), kirjoittanut Geoff Graham (@geoffgraham) CodePenistä.
Tasaisesti jakautunut, sovi tarpeen mukaanElementit virtaavat asetteluun ja loppuvat, kun niitä ei ole enää.
Katso kynän CSS-ruudukko tasaisesti jaettuna, niin monta kuin Geoff Graham (@geoffgraham) tarvitsee CodePenissä.
Artikkeli BreakoutillaTyler Stickan upea pieni temppu, jonka avulla elementti pääsee irti verkosta. Rachel Andrew antaa perusteellisen selvityksen siitä, kuinka nimetyt ruudukkoviivat mahdollistavat tämän toimivan.
Katso Pen CSS Grid: Geoff Grahamin (@geoffgraham) artikkeli Breakoutista CodePenissä.
PeruskalenteriKuten voit odottaa, CSS Grid toimii hyvin kalenteriruudukossa.
Katso Pen CSS Grid: Kalenteri, kirjoittanut Geoff Graham (@geoffgraham) CodePenistä.
Monopoli-hallitusPelilaudan yksinkertainen virkistys. Jen Simmonsilla on suloinen demo, joka sisältää Monpoly-tyylit.
Katso Pen CSS Grid: Monopoly Board -kortti, jonka kirjoittanut Geoff Graham (@geoffgraham) CodePenillä.
Oppimiskumppanimme
Frontend Masters
Tarvitsetko etupään kehityskoulutusta?
Frontend Masters on paras paikka saada se. Heillä on kursseja kaikista tärkeimmistä käyttöliittymätekniikoista, Reactista CSS: ään, Vue: sta D3: een ja pidemmälle Node.js: n ja Full Stackin avulla.
