Aspecte CSS Grid Starter - CSS-Tricks

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 Graal

Aspectul 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 flexibil

Totul 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 Graal

Lucrurile 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 subsol

Un aspect clasic de blog în care o coloană este pentru postare și cealaltă pentru o bară laterală.

2-coloane flexibile

Aspectul 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 receptive

Lucrurile 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 necesar

Elementele 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 ​​Breakout

Un 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 Board

O 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.