CSS tinklelio pradžios maketai - CSS-gudrybės

Tai yra pradinių šablonų, skirtų maketams ir šablonams, naudojant CSS tinklelį, rinkinys. Idėja yra parodyti, ką technika gali atlikti, ir pateikti atspirties tašką, kurį galima pritaikyti kitiems projektams.

Atminkite, kad „Grid“ naršyklės palaikymas yra geras, tačiau senoms naršyklėms reikia atsarginių kopijų. Tai reiškia, kad tiesioginė jų kopija ir įklija gali būti netinkama kai kuriais naudojimo atvejais.

Šventojo Gralio maketas

Klasikinis trijų stulpelių išdėstymas, kai dvi šoninės juostos ir indas, kuriame laikoma kūno kopija, yra tarp viso pločio antraštės ir poraštės.

Lankstus Šventasis Gralis

Viskas lieka nepažeista, nes peržiūros srities plotis keičiasi naudojant skysčio turinio talpyklą.

Žr. Geoffo Grahamo (@geoffgraham) „Pen CSS Grid“ - „Holy Grail 2“ iš „CodePen“.

Reaguojantis Šventasis Gralis

Daiktai sukraunami, kai peržiūros sritis susiaurėja.

Žr. „Pen CSS Grid“: „Holy Grail Layout“ - reaguoja Geoffas Grahamas (@geoffgraham) „CodePen“.

2 stulpeliai su antrašte ir poraštėmis

Klasikinis tinklaraščio išdėstymas, kai vienas stulpelis skirtas įrašui, kitas - šoninei juostai.

Lankstūs 2 stulpeliai

Išdėstymas tampa švelnus, kai peržiūros sritis tampa siaura, tačiau maketas lieka vietoje.

Žiūrėkite „Pen CSS“ tinklelį: antraštė, poraštė su 2 stulpeliais (lankstus), kurią sukūrė Geoffas Grahamas (@geoffgraham) „CodePen“.

Interaktyvūs 2 stulpeliai

Daiktai sukraunami ant mažesnių ekranų.

Peržiūrėkite „Pen CSS“ tinklelį: antraštė, poraštė su 2 stulpeliais (reaguoja), kurią sukūrė Geoffas Grahamas (@geoffgraham) „CodePen“.

Tolygiai paskirstytas, tinka kaip reikia

Elementai patenka į maketą ir baigiasi, kai jų nebėra.

Peržiūrėkite „Pen CSS“ tinklelį, tolygiai paskirstytą, tiek, kiek reikia Geoffui Grahamui (@geoffgraham) „CodePen“.

Straipsnis su „Breakout“

Puikus mažas Tylerio Stickos triukas, leidžiantis elementui išsiveržti iš tinklelio. Rachel Andrew pateikia išsamų paaiškinimą, kaip pavadintos tinklelio linijos leidžia tai veikti.

Žr. „Pen CSS Grid“: Geoffo Grahamo (@geoffgraham) straipsnis su „Breakout“ svetainėje „CodePen“.

Pagrindinis kalendorius

Kaip ir galima tikėtis, CSS tinklelis gerai veikia kalendoriaus tinklelį.

Žr. „Pen CSS Grid“: Geoffo Grahamo (@geoffgraham) kalendorius „CodePen“.

Monopolijos valdyba

Paprastas žaidimų stalo poilsis. Jen Simmons turi mielą demonstracinę versiją su „Monpoly“ stiliais.

Žiūrėkite „Pen CSS Grid“: „Geop Graham“ (@geoffgraham) „Monopoly Board“ iš „CodePen“.

Mūsų mokymosi partnerių „ Frontend“ meistrai

Reikia „front-end“ mokymo mokymų?

„Frontend Masters“ yra geriausia vieta jį gauti. Jie turi kursus apie visas svarbiausias „front-end“ technologijas, nuo „React“ iki CSS, nuo „Vue“ iki D3 ir dar daugiau su „Node.js“ ir „Full Stack“.