În martie, Mozilla a lansat Firefox 52, care a adăugat suport pentru CSS Grid Layout. Dacă nu sunteți familiarizați cu CSS Grid, acesta este un sistem de layout bidimensional pentru web care ne permite să creăm modele de layout în mod nativ în browser. Acest lucru înseamnă că putem recrea cu ușurință grilele familiare folosind doar câteva linii de CSS. De asemenea, înseamnă că putem face o mulțime de lucruri cu CSS și layout-uri care nu erau posibile înainte… dar mai multe despre asta imediat.
O scurtă notă: Această postare nu este menită să fie o introducere completă pentru CSS Grid și presupune o familiaritate de bază cu CSS Grid. Dacă nu ați făcut-o deja, vă recomand să verificați pagina fantastică CSS Grid Layout de pe MDN.
Layout-urile pe web au fost întotdeauna dificile. Când web-ul a fost introdus pentru prima dată, nu exista o metodă pentru layout-uri. Apoi au apărut tabelele (în tabele, în tabele, în tabele, în tabele). A fost hackish și ciudat, dar a funcționat. Când CSS a fost introdus la sfârșitul anilor ’90, dezvoltatorii au putut începe să folosească div-uri și float-uri pentru proiectele și layout-urile lor. Acest lucru a dus, în cele din urmă, la cadre și sisteme de grilă care au ajutat la înțelegerea tuturor „gotchas”, cum ar fi flotoarele de compensare, marjele negative, designul receptiv și multe altele. Și așa au stat lucrurile de ani de zile. Există mii de sisteme de grilă, dar toate sunt, mai mult sau mai puțin, la fel.
Acum că CSS Grid Layout este o realitate, am vrut să văd ce ar fi nevoie pentru a înlocui un cadru de grilă existent cu CSS Grid. Pentru acest experiment, am ales popularul framework Bootstrap.
Am început prin a crea un site de bază folosind grila Bootstrap:
Veziți-l pe CodePen.
Așa că haideți să descompunem acest lucru și să-l convertim pentru a folosi CSS Grid.
În Bootstrap, clasa .container învăluie totul și stabilește constrângerile de lățime. De asemenea, adaugă o umplutură la marginile din stânga și din dreapta și centrează totul. Nu sunt multe de schimbat aici. La fel ca în Bootstrap, clasa container poate fi utilă pentru a fi utilizată cu CSS Grid. Am recreat-o astfel:
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px;}De asemenea, putem adăuga puncte de întrerupere responsive adăugând următoarele:
@media (min-width: 992px) { .container { width: 970px; }}Bootstrap folosește clasa .row pentru a înfășura coloanele și a oferi o marjă negativă în stânga și în dreapta pentru a anula umplutura adăugată de coloanele individuale. Hack-uri precum marginile negative nu mai sunt necesare cu CSS Grid, dar dacă ați citit documentația, veți ști că CSS Grid necesită un container de grilă. Clasa .row este locul perfect pentru a face acest lucru. Dați-mi voie să vă arăt ce am făcut, iar apoi o vom descompune.
.row { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 20px;}display: grid creează containerul grilă.
Proprietatea grid-template-columns definește coloanele pentru grilă. Puteți folosi spații pentru a defini fiecare coloană în parte, dar aici folosim notația de repetare pentru a defini 12 coloane de dimensiuni egale. 1fr se referă la lățimea coloanei individuale. MDN definește unitatea fr ca fiind o nouă unitate care „reprezintă o fracțiune din spațiul disponibil în containerul grilei”. Puteți citi mai multe despre unitățile fr pe MDN. De asemenea, puteți citi mai multe despre proprietatea grid-template-columns.
În cele din urmă, proprietatea grid-gap este o proprietate prescurtată care definește atât cantitatea de spațiu între coloane, cât și între rândurile de coloane. Gândiți-vă la ea ca la jgheabul nostru. Puteți citi mai multe despre grid-gap aici.
Acum, tot ce a mai rămas sunt clasele de coloane. Bootstrap folosește clase de coloane precum .col-md-6 sau .col-lg-8 pentru a determina numărul de coloane pe care ar trebui să se întindă un div. De asemenea, plutește div-ul și adaugă umplutură în stânga și în dreapta pentru a crea jgheaburi între coloane. Recrearea acestor clase este incredibil de ușoară datorită proprietății de prescurtare .grid-column. De exemplu, dacă am dori să recreăm clasa .col-md-6, putem folosi următoarele:
@media (min-width: 992px) { .col-md-6 { grid-column: span 6; }}Simplu, nu? Fără flotoare. Fără umplutură. Pur și simplu funcționează. Prescurtarea grid-column specifică dimensiunea și locația unui element. Putem folosi span pentru a indica faptul că acest anumit element trebuie să se întindă pe șase coloane. De jgheab se ocupă în mod automat datorită proprietății grid-gap a învelișului. Puteți afla mai multe despre proprietatea grid-column aici.
Și ce se întâmplă atunci când puneți totul cap la cap? Ei bine, site-ul arată exact la fel, dar suntem capabili să eliminăm complet dependența de Bootstrap și să folosim grile CSS native.
Veziți site-ul web actualizat pe CodePen.
Acest tip de experiment este un exercițiu de învățare distractiv, dar poate fi și periculos. Pentru a împrumuta o replică de la înțeleptul filozof Jeff Goldblum:
„Tu… erai atât de preocupat dacă poți sau nu poți, încât nu te-ai oprit să te gândești dacă ar trebui.”
Nu vrem să limităm CSS Grid prin introducerea acestuia într-o sintaxă care îi va limita potențialul. Am reușit să recreăm cu ușurință grila Bootstrap, dar CSS Grid este mult mai puternic decât orice sistem de grilă care a venit înaintea sa. Acest lucru se datorează faptului că este o soluție nativă web construită de la zero.
Nu mai suntem blocați în grile cu 12 coloane care plutesc de la stânga la dreapta. Doriți să plasați elementele în locații precise pe grilă, independent de ordinea sursei lor HTML? Dați-i drumul. Doriți să creați elemente care se întind pe mai multe coloane și rânduri? Nu este o problemă. Consultați această demonstrație pe care Craig Cook de la Mozilla a creat-o pentru a prezenta diverse modele de dispunere. Încercați să recreați unele dintre aceste machete folosind Bootstrap (indiciu: nu este posibil). Abia zgâriem suprafața a ceea ce pot face grilele CSS.