Accentsconagua
Share
Modul în care abordăm aspectul pe web se schimbă, iar în prim-planul acestei modificări este structura CSS Grid. Acest ghid de pornire rapidă actualizat va trece peste detaliile și nuanțele, ajutându-vă să vă blocați, chiar acum.
CSS Grid Layout (cunoscut de prietenii săi ca "Grid") a venit în salturi în ultimul an și, ca atare, veți găsi suportul browser-ului pentru el destul de solid în ziua de azi.
caniuse.comGrilă ne permite să aranjăm elemente pe o pagină, în funcție de regiuni create de ghiduri.
La cele mai simple aceste ghiduri, sau linii de rețea, cadru orizontal și vertical grilă. Rețelele de gril servesc ca rânduri și coloane, cu jgheaburi alergând între ele. Unde se intersectează traseele orizontale și verticale, rămânem cu ele celulele, la fel cum folosim cu mesele. Acestea sunt toți termenii importanți de înțeles.
În imaginea de mai jos veți vedea o grilă demo, afișând:
O rețea de bază, evidențiind linii de rețea, coloane, rânduri și celulePentru un aspect grafic, ar putea părea mai familiar dacă folosim exact aceeași rețea, dar facem câteva piese pentru a ne da jgheaburi între zonele de conținut.
Aceeași grilă, dar de această dată, seamănă asemănătoare cu pavilionul finlandezExistă un ultim termen pe care trebuie să-l clarificăm înainte de a merge mai departe:
Una dintre numeroasele zone posibile ale grilajului din grila demoA grilă este o parte a rețelei noastre împrejmuită de patru linii de rețea; acesta poate cuprinde orice număr de celule de rețea.
Este timpul să construiți această rețea în browser! Să începem cu un marcaj.
Pentru a recrea grila de mai sus, avem nevoie de un element container; orice doresti:
În ea vom plasa nouă elemente copil.
Dacă doriți să urmați, introduceți acest stilou de pornire. Am adăugat câteva stiluri de bază pentru a diferenția vizual fiecare element de rețea.
În primul rând, trebuie să declare că elementul nostru container este o rețea utilizând o nouă valoare pentru afişa proprietate:
.grilă-1 display: grilă;
Așa a fost ușor. Apoi trebuie să definim grila noastră, indicând câte piste de grilă vor avea, atât pe orizontală cât și pe verticală. Noi facem asta cu grilă matriță coloane și grid-șablon rânduri proprietăţi:
.grilă-1 display: grilă; grilă-șablon-coloane: 150px 150px 150px; grilă-șablon-rânduri: auto auto auto;
Veți observa trei valori pentru fiecare. Valorile pentru grilă matriță coloane afirmați că "toate cele trei coloane ar trebui să aibă o lățime de 150px". Cele trei valori pentru grid-șablon rânduri spune ceva similar. Fiecare ar fi de fapt auto în mod implicit, luând în înălțime conținutul, dar le-am declarat aici pentru a vizualiza clar ce se întâmplă.
Deci ce avem acum??
Fiecare element al nostru a fost atribuit automat o zonă de rețea în ordine cronologică. Nu e rău, dar ne lipsesc jgheaburile. E timpul să rezolv asta.
Rețeaua vine cu o soluție pentru realizarea măsurătorilor jgheaburilor. Putem folosi grilă coloană-gap și grid-rând-gap, sau stenografia grid-gap proprietate.
Să adăugăm un jgheab fix de 20 de pixeli la adresa noastră .grid-1 element.
.grilă-1 display: grilă; grilă-șablon-coloane: 150px 150px 150px; grilă-șablon-rânduri: auto auto auto; grilă-decalaj: 20 pixeli;
Și acum, avem o grilă frumoasă și îngrijită:
Asta e, te-ai descurcat cu Grid! Să revedem cei patru pași esențiali:
afișare: grilă;.grilă matriță coloane și grid-șablon rânduri proprietăţi.grid-gap proprietăţi.În următoarea parte a acestei serii vom examina mai profund sintaxa rețelei, vom explora planurile flexibile, fr unitate, repeta() funcția noastră, și luați grila noastră simplă mult mai departe. Ne vedem acolo!
