CSS Grid Starter Layouts - CSS-trikid

Lang L: none (table-of-contents)

See on CSS Gridi kasutavate paigutuste ja mustrite stardimallide kogu. Selle idee on näidata, mida tehnika suudab, ja pakkuda lähtepunkti, mida saab teiste projektide jaoks uuesti kasutada.

Pidage meeles, et brauseri tugi Gridile on hea, kuid nõuab varasemate brauserite jaoks varukoopiaid. See tähendab, et nende sirgjooneline koopia ja kleepimine ei pruugi mõnel juhul sobida.

Püha Graali paigutus

Klassikaline kolme veeruga paigutus, kus kaks külgriba ja kehakoopiat hoidev mahuti on täislaiuse päise ja jaluse vahel.

Paindlik Püha Graal

Kõik jääb puutumatuks, kui vaateava laius muutub vedeliku sisalduse konteineri abil.

Vaadake Code CSenis Geoff Graham (@geoffgraham) Pen CSS Grid - Holy Grail 2.

Tundlik Püha Graal

Asjad laotakse kokku, kui vaateava kitseneb.

Vaadake Pen CSS Grid: Holy Grail Layout - reageeriv Geoff Graham (@geoffgraham) CodePenis.

2 veergu päise ja jalusega

Klassikaline ajaveebipaigutus, kus üks veerg on postituse jaoks ja teine ​​külgriba jaoks.

Paindlikud 2-veerud

Paigutus muutub tuhmiks, kui vaateava muutub kitsaks, kuid paigutus jääb paigale.

Vaadake Geoff Grahami (@geoffgraham) CodePenilt Pen CSS Grid: päis, 2-veerulise (paindliku) jalus.

Reageerivad 2-veerud

Asjad laotakse väiksematele ekraanidele.

Vaadake Geoff Grahami (@geoffgraham) pliiatsi CSS Grid: päis, 2-veeruline jalus (reageeriv) CodePenis.

Ühtlaselt jaotatud, sobib vastavalt vajadusele

Elemendid voolavad paigutusse ja lõpevad siis, kui neid enam pole.

Vaadake CodePenil ühtlaselt jaotatud Pen CSS Grid'i, nii palju kui vaja Geoff Graham (@geoffgraham).

Artikkel koos Breakoutiga

Tyler Sticka suurepärane väike trikk, mis võimaldab elemendil võrgust välja murda. Rachel Andrew annab põhjaliku selgituse selle kohta, kuidas nimetatud võrgujooned seda võimaldavad.

Vaadake Pen CSS Grid: Geoff Graham (@geoffgraham) artikkel Breakoutiga CodePenis.

Põhikalender

Nagu arvata võib, töötab CSS Grid kalendriruudustiku jaoks hästi.

Vaadake Pen CSS Grid: Geoff Graham (@geoffgraham) kalender CodePenis.

Monopoolne juhatus

Mängulaua lihtne puhkus. Jen Simmonsil on Monpoly stiilidega armas demo.

Vaadake Pen CSS Grid: monopoolne juhatus, mille autor on Geoff Graham (@geoffgraham) CodePenis.

Meie õppepartneri esiosa meistrid

Kas vajate esiotsa arenduskoolitust?

Frontend Masters on parim koht selle hankimiseks. Neil on kursused kõigi olulisemate esiotstehnoloogiate kohta, alates Reactist CSS-ni, Vue-st kuni D3-ni ja kaugemalgi koos Node.js ja Full Stackiga.

Huvitavad Artiklid...