Šī ir starta veidņu kolekcija izkārtojumiem un modeļiem, izmantojot CSS režģi. Ideja ir parādīt, ko šī tehnika spēj paveikt, un nodrošināt sākumpunktu, ko var atkārtoti izmantot citiem projektiem.
Atcerieties, ka pārlūka atbalsts Grid ir labs, taču mantotajām pārlūkprogrammām ir nepieciešami atkāpes. Tas nozīmē, ka to taisna kopija un ielīmēšana dažos lietošanas gadījumos var nebūt piemērota.
Svētā Grāla izkārtojumsKlasiskais trīs kolonnu izkārtojums, kurā divas sānjoslas un konteiners, kurā atrodas ķermeņa kopija, ir iestiprināti starp pilna platuma galveni un kājeni.
Elastīgs Svētais GrālsViss mainās, jo mainās skata platums, izmantojot šķidruma satura konteineru.
Skatiet Geoff Graham (@geoffgraham) Pen CSS Grid - Holy Grail 2 vietnē CodePen.
Atsaucīgs Svētais GrālsLietas tiek sakrautas, kad skata punkts kļūst šaurs.
Skatiet Pen CSS režģi: Svētā Grāla izkārtojums - atsaucīgs Geoff Graham (@geoffgraham) vietnē CodePen.
2 kolonnas ar galveni un kājeniKlasisks emuāra izkārtojums, kurā viena kolonna ir paredzēta ziņai, bet otra - sānjoslai.
Elastīgas 2 kolonnasIzkārtojums kļūst gluds, kad skata punkts kļūst šaurs, bet izkārtojums paliek vietā.
Skatiet pildspalvas CSS režģi: galvene, kājene ar 2 kolonnu (elastīgu), ko izveidoja Geoff Graham (@geoffgraham) vietnē CodePen.
Reaģējošas 2 kolonnasLietas tiek sakrautas uz mazākiem ekrāniem.
Skatiet Geoff Graham (@geoffgraham) pildspalvas CSS režģi: galvene, kājene ar 2 kolonnu (atsaucīgu) vietnē CodePen.
Vienmērīgi sadalīts, piemērots pēc vajadzībasElementi ieplūst izkārtojumā un beidzas, kad to vairs nav.
Skatiet vienmērīgi sadalītu Pen CSS režģi, tik daudz, cik nepieciešams Geoff Graham (@geoffgraham) vietnē CodePen.
Raksts ar BreakoutLielisks Tailera Stickas triks, kas ļauj elementam izlauzties no režģa. Reičela Endrjū sniedz izsmeļošu paskaidrojumu par to, kā nosauktie režģa līnijas ļauj tam darboties.
Skatiet Pen CSS režģi: raksts ar Breakout, ko izveidoja Geoff Graham (@geoffgraham) vietnē CodePen.
Pamata kalendārsKā jūs varētu sagaidīt, CSS režģis labi darbojas kalendāra režģī.
Sk. Pen CSS režģi: Geoff Graham (@geoffgraham) kalendārs vietnē CodePen.
Monopola padomeVienkārša spēles galda atpūta. Jen Simmons ir jauka demonstrācija komplektā ar Monpoly stiliem.
Skatīt Pen CSS režģi: Geoff Graham (@geoffgraham) monopola padome vietnē CodePen.
Mūsu mācību partneru
priekšgala meistari
Nepieciešama priekšgala attīstības apmācība?
Frontend Masters ir labākā vieta, kur to iegūt. Viņiem ir kursi par visām svarīgākajām priekšgala tehnoloģijām, sākot no React līdz CSS, no Vue līdz D3 un tālāk, izmantojot Node.js un Full Stack.