Aflați CSS Grid în 5 minute – Un tutorial pentru începători

Aspectele grilei sunt fundamentale pentru proiectarea site-urilor web, iar modulul CSS Grid este cel mai puternic și mai simplu instrument pentru crearea acestuia. Eu personal cred că este mult mai bine decât de exemplu Bootstrap (citiți de ce aici).

Modulul a primit, de asemenea, suport nativ de către browsere majore (Safari, Chrome, Firefox, Edge), așa că cred că toți dezvoltatorii front-end vor trebui să învețe această tehnologie în nu prea îndepărtat viitor.

În acest articol, vă voi prezenta elementele de bază ale CSS Grid cât mai repede posibil. Voi lăsa afară tot ce nu ar trebui să-ți pese până nu vei înțelege elementele de bază.

De asemenea, am creat un curs CSS Grid gratuit. Faceți clic aici pentru a obține acces complet la
aceasta.

Alternativ, verificați Acest articol, care explică ce veți învăța pe tot parcursul cursului:

Acum, să sărim în el!

Primul dvs. aspect de grilă

Cele două ingrediente principale ale unei grile CSS sunt împachetare (părinte) și
obiecte (copii). Învelișul este grila reală, iar articolele sunt conținutul din grilă.

Iată marcajul pentru un wrapper cu șase elemente:

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Să ne întoarcem învelișul div intr-o grilă, pur și simplu îi oferim o afișare a
grid:

Dar acest lucru nu face încă nimic, deoarece nu am definit cum dorim să arate grila noastră. Pur și simplu va stiva 6 div'suna peste alta.

Am adăugat un pic de stil, dar asta nu are nicio legătură cu grila CSS.

Coloane și rânduri

Pentru ao face bidimensională, va trebui să definim coloanele și rândurile. Să creăm trei coloane și două rânduri. Vom folosi grid-template-row și grid-template-column proprietăți.

După cum am scris trei valori pentru grid-template-columns, vom primi trei coloane. Vom primi două rânduri, deoarece am specificat două valori pentru grid-template-rows.

Valorile dictează cât de largi ne dorim să fie coloanele noastre (100 px) și cât de înalte ne-am dori să fie rândurile noastre (50 px). Iată rezultatul:

Pentru a vă asigura că înțelegeți în mod corespunzător relația dintre valori și cum arată grila, aruncați o privire și la acest exemplu.

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 50px 50px;
}

Încercați să înțelegeți conexiunea dintre cod și aspect.

Iată cum se desfășoară:

Plasarea articolelor

Următorul lucru pe care va trebui să-l învățați este să plasați elemente pe grilă. Aici veți obține superputeri, deoarece simplifică crearea de machete.

Să creăm o grilă 3×3, folosind același marcaj ca înainte.

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

Acest lucru va avea ca rezultat următorul aspect:

Observați, vedem doar o grilă 3×2 pe pagină, în timp ce am definit-o ca o grilă 3×3. Asta pentru că avem doar șase articole cu care să umpleți grila. Dacă am mai avea trei, atunci s-ar umple și cel mai jos rând.

Pentru a poziționa și redimensiona articolele, le vom viza și vom folosi grid-column și grid-row proprietăți:

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

Ceea ce spunem aici este că vrem ca elementul 1 să înceapă pe prima linie de grilă și să se termine pe a patra linie de coloană. Cu alte cuvinte, va ocupa întregul rând.

Iată cum se va reda pe ecran:

Ești confuz de ce avem 4 linii de coloană atunci când avem doar 3 coloane? Uitați-vă la această imagine, unde am trasat liniile de coloană în negru:

Observați că acum folosim toate rândurile din grilă. Când am făcut ca primul articol să ocupe întregul rând, acesta a împins restul articolelor în jos.

În cele din urmă, aș dori să arăt un mod mai simplu de a scrie sintaxa de mai sus:

Pentru a ne asigura că ați înțeles corect acest concept, să rearanjăm puțin articolele.

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}

.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}

.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

Iată cum arată asta pe pagină. Încercați să vă înfășurați capul de ce se pare. Nu ar trebui să fie prea greu.

Și asta a fost!

Mulțumesc pentru lectură! Numele meu este Per Borgen, sunt cofondatorul Scrimba – cel mai simplu mod de a învăța să codezi. Ar trebui să verificați bootcamp de design web receptiv dacă doriți să învățați să construiți un site web modern la nivel profesional.