Cum se creează un aspect simplu cu aspect grilă CSS

Dacă v-ați implicat vreodată în designul de imprimare, știți de unde a apărut ideea de aranjamente în grilă. O grilă este un instrument de măsurare precis folosit pentru a poziționa elementele de design pe o pagină. Această idee este adesea folosită pe web pentru a face conținutul organizat și uniform, oferind o experiență de vizionare îmbunătățită pentru utilizatorii dvs.

Când practica designului web era nouă, machetele erau destul de simple. Antet, bară laterală, zonă de conținut și subsol. Acum, pe măsură ce web-ul a evoluat, layout-urile noastre au devenit mai complexe și avem mult mai multe de confruntat ca designeri web. Adesea avem nevoie de numeroase regiuni de conținut, design responsive, modele de șabloane de mai multe pagini, printre multe alte lucruri. Și pentru a implementa designul și pentru a-l afișa corect, sunt necesare flotoare și poziționare. Flotatoarele sună simplu, dar uneori pot fi dificil de lucrat cu acestea.

Din fericire, grila oferă o modalitate mai ușoară de a proiecta și afișa conținut web. Este o perioadă minunată pentru a fi designer, deoarece CSS Grid Layouts câștigă rapid popularitate. Se poate simți că grilele au fost o idee nouă în designul web în ultimii ani, dar crezi sau nu, CSS Grid Layouts sunt în lucru de mulți ani. Suportul de browser pentru ele a avut loc foarte repede, așa că acum pot ajuta la atenuarea frustrării legate de poziționare cu care au trebuit să se confrunte designerii de mulți ani.

În sfârșit, este timpul să pătrundem în grilă și să explorezi noile posibilități de design!

Suport grilă CSS

Totul depinde de browserele pe care trebuie să le susțineți, dar există șanse destul de mari să nu vă faceți griji cu privire la „modul de semnalizare” atunci când utilizați Grile CSS. Puteți vizita oricând documentația Can I Use pentru a verifica, dar suportul pentru CSS Grids a crescut dramatic și mulți designeri îl pot folosi în producție, ceea ce este motiv de sărbătoare!

Noțiuni de bază pentru aspectul grilei CSS

Prin utilizarea CSS, aspectul grilă va ajuta la definirea zonelor de conținut pe pagina dvs. web. Există un set relativ nou de proprietăți definit în Specificațiile CSS Grid Layout. Aceasta este o resursă excelentă de referință atunci când aflați mai multe despre acest nou mod de proiectare a aspectului. Aspectele grilă CSS ajută la simplificarea lucrurilor și ușurează crearea machetelor. Gândiți-vă la grilă ca la o structură în care pot fi definite măsurători.

Părți ale rețelei

Linii

În acest caz, există cinci linii verticale și trei linii orizontale. Liniile sunt date numere începând de la unu. Liniile verticale sunt afișate de la stânga la dreapta în acest exemplu, dar acest lucru depinde de direcția de scriere. Deoarece aceasta arată citirea de la stânga la dreapta, dacă este de la dreapta la stânga, lucrurile vor fi inversate. Liniile pot primi nume (opțional), ceea ce ajută la referirea lor în CSS.

Urme

O pistă este spațiul dintre două linii paralele. În diagramă, există patru piste verticale și două piste orizontale. Există un mare efort dublu între linii și piste. Liniile sunt o modalitate excelentă de a face referire la locul în care începe și se oprește conținutul. Piesele sunt acolo unde merge de fapt conținutul.

Celulele

Celulele se găsesc acolo unde o pistă orizontală și una verticală se întâlnesc. Există opt celule în diagramă.

Zone

Celulele intră în joc la specificarea zonelor. O zonă este o formă dreptunghiulară care poate cuprinde un număr de celule. La fel ca liniile, zonele pot fi denumite opțional. Există câteva etichete incluse în diagramă: „A”, „B” și „C”.

Crearea unui aspect grilă

Poate fi util să schițați lucrurile înainte de a începe aspectul. Nu există niciun înlocuitor pentru hârtia milimetrică veche.

HTML pentru grilă

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

Containerul este foarte important. În interiorul containerului se află diferitele blocuri de conținut pentru site-ul web. Ordinea elementelor din grilă din container nu contează. În continuare, vom folosi CSS pentru a le plasa în aspectul nostru.

Stiluri CSS

După ce ați terminat cu marcajul HTML, cea mai importantă declarație se face în CSS. În cadrul containerului, trebuie să aplicați display:grid sau display:inline-grid . Utilizați display:grid dacă doriți o grilă la nivel de bloc. Utilizați display:inline-grid pentru grile la nivel inline.

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

Proprietățile grid-template-columns și grid-template-rows sunt utilizate pentru a specifica lățimea rândurilor și coloanelor. grid-template-columns au fost setate ca 1fr și 3fr. Aici se formează grila cu unitățile fracționale. Cu aceste valori, este evident că există două coloane și nu au lățimea egală. Coloana setată la 3fr este de trei ori mai largă decât cealaltă. Aceasta explică modul în care bara laterală pare mai îngustă decât zona de conținut.

Există personalizări receptive care pot fi făcute, dar utilizarea unităților fracționale este un prim pas grozav. Distanța dintre zone poate fi controlată cu grid-column-gamp și grid-row-gap .

Lucrurile par destul de strâmte, dar cu câteva specificații în plus, lucrurile vor prinde contur.

Acest exemplu începe cu plasarea antetului, dar elementele pot fi plasate în orice ordine care funcționează cel mai bine pentru dvs. Dacă doriți să începeți cu subsolul, va funcționa și asta.

Să începem cu antetul, care merge de la coloana 1 la coloana 4 și rândul 1 la rândul 2. CSS-ul va arăta astfel:

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

Este posibil să observați că bara laterală este strivită și nu o putem vedea foarte mult. Va trebui să facem o mică rearanjare. În acest aspect, referirea liniilor pentru a obține plasarea va ajuta la aranjament. Liniile acționează ca linii directoare. Antetul este situat între linia de la rândul unu și linia de la rândul doi. Pentru bara laterală, va începe la rândul trei și se va termina la rândul șase. Rândul antetului se termină la doi, așa că acesta va fi plasat chiar sub el. Pentru a vizualiza exemplul, vezi proiectul pe Codepen.

Folosim grid-column-start pentru a specifica linia verticală de pornire pentru un element. În acest caz, ar fi setat la trei. grid-column-end indică linia verticală de sfârșit pentru un element. În acest caz, această proprietate ar fi egală cu patru. Celelalte valori de rând vor fi, de asemenea, setate în același mod. Amplasarea barei laterale este acolo, este doar acoperită de zona de conținut.

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

Conținutul principal începe la coloana trei și se termină la coloana a patra. Partea de sus a barei laterale și a zonei de conținut sunt egale, așa că ambele au un grid-row-start de trei. S-ar putea să vă întrebați cum conținutul și bara laterală sunt mult mai înalte. Punând pe container o înălțime, în acest caz 400px, aceasta este acum mai înaltă decât celelalte elemente.

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

Ultimele două zone de conținut sunt zona de conținut suplimentar și subsolul.

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

Declarațiile de sfârșit și de început pot fi scrise mai eficient. Este posibil să vedeți grid-column-start: 1; și grid-column-end: 3; scris cu stenografie. Aceasta ar arăta ca grid-column: 1 / 3; . Aceeași idee poate fi folosită pentru a declara informații despre rândurile coloanei.

Avantaje responsive

Acum că a fost creat un aspect, pare foarte „desktop”. Dar tabletele și dispozitivele mobile? Aspectele grilă CSS funcționează bine cu interogări media, astfel încât designul se poate adapta la diferite dimensiuni de ecran. Ceea ce este cu adevărat mișto este că puteți modifica zonele de conținut la aceste puncte de întrerupere diferite a interogării media. În calitate de designer, aceasta înseamnă că alegeți ceea ce este cel mai bun pentru aspectul dvs. la diferite puncte de întrerupere. De exemplu, dacă doriți ca „conținutul suplimentar” să fie plasat deasupra zonei de „conținut”, puteți specifica coloanele și rândurile corecte.

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

Prin faptul că coloanele încep la unu și se termină la patru, am făcut zonele de conținut cu lățime completă. Rândurile grilei sunt plasate astfel încât „conținutul suplimentar” să fie acum deasupra „conținutului”.

Instrument de browser pentru aspectul grilă CSS

Pe măsură ce proiectați machete sau inspectați alte site-uri web, Firefox vă oferă un instrument grozav pentru lucrul cu aspectul grilă CSS. Se numește CSS Grid Playground și face examinarea grilei foarte intuitivă. Mergând la inspector, există o opțiune în fila aspect pentru a vedea vizual cum este construită grila. Acest instrument va facilita procesul de proiectare pentru a explora modul în care diferitele proprietăți ale grilei afectează aspectul și designul general al grilei.

Aspectele grilă CSS sunt o modalitate nouă și interesantă de a crea machete web. După cum puteți vedea, este destul de ușor să fiți în funcțiune atunci când creați un aspect simplu de pagină. Acest exemplu simplu este o bază bună pentru cum să realizați machete mai complexe. Pe măsură ce aceasta câștigă în popularitate, această tehnologie va avea un avantaj atunci când proiectați pentru diferite dispozitive și puncte de întrerupere cu personalizările aspectului care pot fi făcute.