Aceasta este o colecție de șabloane de pornire pentru machete și modele folosind CSS Grid. Ideea de aici este să arate ce este capabilă să facă tehnica și să ofere un punct de plecare care poate fi refăcut pentru alte proiecte.
Amintiți-vă că suportul pentru browser pentru Grid este bun, dar necesită alternative pentru browserele vechi. Asta înseamnă că o copiere și lipire directă a acestora poate să nu fie potrivită pentru anumite cazuri de utilizare.
Aspectul Sfântului GraalAspectul clasic cu trei coloane în care două bare laterale și un container care deține copia corpului sunt intercalate între un antet și un subsol cu lățime completă.
Sfântul Graal flexibilTotul rămâne intact pe măsură ce lățimea ecranului se schimbă utilizând un container de conținut fluid.
Vezi Grila CSS Pen - Holy Graal 2 de Geoff Graham (@geoffgraham) pe CodePen.
Responsabil Sfântul GraalLucrurile se stivuiesc odată ce ecranul se îngustează.
Vezi Grila CSS Pen: Layout Holy Graal - Responsive by Geoff Graham (@geoffgraham) on CodePen.
2-Coloane cu antet și subsolUn aspect clasic de blog în care o coloană este pentru postare și cealaltă pentru o bară laterală.
2-coloane flexibileAspectul devine strâmtor când fereastra de vizualizare devine îngustă, dar aspectul rămâne la locul său.
Vezi Grila CSS Pen: Header, Footer with 2-Column (Flexible) de Geoff Graham (@geoffgraham) pe CodePen.
2-coloane receptiveLucrurile se acumulează pe ecrane mai mici.
Vezi Grila CSS Pen: Header, Footer with 2-Column (Responsive) de Geoff Graham (@geoffgraham) pe CodePen.
Distribuit uniform, se potrivește după cum este necesarElementele curg în aspect și se termină atunci când nu mai există.
Vezi Grila CSS Pen distribuită uniform, atât cât este nevoie de Geoff Graham (@geoffgraham) pe CodePen.
Articol cu BreakoutUn mic truc minunat de Tyler Sticka care permite unui element să iasă din grilă. Rachel Andrew oferă o explicație amănunțită despre modul în care liniile de rețea numite permit acest lucru să funcționeze.
Vezi Grila CSS Pen: Articol cu Breakout de Geoff Graham (@geoffgraham) pe CodePen.
Calendar de bazăAșa cum v-ați putea aștepta, CSS Grid funcționează bine pentru o grilă calendaristică.
Vezi Grila Pen CSS: Calendar de Geoff Graham (@geoffgraham) pe CodePen.
Monopoly BoardO simplă recreere a tabloului de joc. Jen Simmons are o demonstrație dulce completată cu stiluri Monpoly.
Vedeți Grila Pen CSS: Monopoly Board de Geoff Graham (@geoffgraham) pe CodePen.
Partenerii noștri de învățare
Frontend Masters
Aveți nevoie de pregătire pentru dezvoltare front-end?
Frontend Masters este cel mai bun loc pentru a-l obține. Au cursuri despre toate cele mai importante tehnologii front-end, de la React la CSS, de la Vue la D3 și nu numai cu Node.js și Full Stack.