CSS režģa sākuma izkārtojumi - CSS-triki

Šī 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ārtojums

Klasiskais 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āls

Viss 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āls

Lietas 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ājeni

Klasisks emuāra izkārtojums, kurā viena kolonna ir paredzēta ziņai, bet otra - sānjoslai.

Elastīgas 2 kolonnas

Izkā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 kolonnas

Lietas 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ības

Elementi 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 Breakout

Lielisks 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ārs

Kā 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 padome

Vienkā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.