Share
Un lucru pe care l-am menționat, dar care încă nu trebuie să acopere corect în această serie este zonele de rețea. Până în prezent, elementele noastre de rețea au fost fiecare conținute într-o singură celulă de rețea, dar putem obține scheme mai utile prin depășirea acestor limite. Hai să aruncăm o privire!
Iată grilă la care lucrăm: nouă elemente de grilă plasate automat în trei coloane egale, trei rânduri egale, împărțite pe jgheaburi de 20px.
În prezent, articolele noastre au doar stiluri de culori, însă să ne întoarcem la ceea ce am învățat în primul tutorial și să adăugăm câteva grilă coloană și grilă rând reguli, de data aceasta cu ceva extra:
.element-1 background: # b03532; grilă-coloană: 1/3; grilă-rând: 1;
În această scurtă durată grilă coloană pe care o folosim în mod eficient grilă coloană de pornire și grilă coloană-end, spunând elementul să înceapă la linia de rețea 1 și să se termine la linia de rețea 3.
Grilele 1 și 3 ale rețeleiIată ce ne dă; primul element se raspandeste acum in doua celule, impingand celelalte elemente in dreapta si in jos conform algoritmului de plasare automata al Grid-ului.
Același lucru se poate face și cu rânduri care ne-ar oferi o zonă mult mai mare în partea stângă sus a grilajului nostru.
.element-1 background: # b03532; grilă-coloană: 1/3; grilă-rând: 1/3;
Folosind ceea ce este probabil o sintaxă mai ușoară, putem schimba grilă coloană-end pentru deschidere cuvinte cheie. Cu deschidere nu suntem legați de specificarea locului în care se termină zona, ci de definirea numărului de piese pe care elementul ar trebui să-i răspândească:
.element-1 background: # b03532; grilă-coloană: 1 / interval 2; grilă-rând: 1 / span 2;
Acest lucru ne dă același rezultat final, dar dacă ne-am schimba unde vrem să începem elementul, nu mai vom fi obligați să schimbăm sfârșitul.
În următoarea demonstrație puteți vedea că am golit aspectul eliminând patru dintre elementele respective. Am declarat poziționarea pe două dintre elementele noastre: primul cuprinde două coloane și două rânduri, în timp ce al patrulea începe pe coloana 3, rândul 2 și se întinde în jos pe două piste:
Elementele rămase umple automat spațiul disponibil. Acest lucru evidențiază perfect modul în care o structură de rețea nu trebuie să reflecte ordinea sursă a elementelor.
Notă: există multe situații în care ordinul sursă absolut ar trebui să reflectă prezentarea - nu uita de accesibilitate.
Folosind metodele de numerotare pe care le-am descris până acum funcționează foarte bine, dar zonele de șablon de rețea pot face ca aspectul definitoriu să fie și mai intuitiv.
Mai exact, ne permit să denumim zonele din rețea. Cu aceste zone numite, putem să le menționăm (în loc de numerele de linie) pentru a poziționa elementele noastre. Să rămânem la demo-ul nostru curent pentru moment și să îl folosim pentru a ne face un aspect de pagină dur, care cuprinde:
Definim aceste zone pe containerul nostru de rețea, aproape ca și cum l-am desenat:
.grid-1 / * ... stilurile existente * / grid-template-areas: "antetul antetului header" "main bar principal" "footer footer footer";
Acum ne îndreptăm atenția asupra obiectelor, dărâmând grilă coloană și grilă rând se pronunță în favoarea grid-area:
.element-1 background: # b03532; aria grilă: antet; .item-2 fundal: # 33a8a5; grilă: principală; .item-3 background: # 30997a; grilă: bara laterală; .item-4 background: # 6a478f; grilă: subsol;
Primul nostru element este introdus în antet, acoperind toate coloanele cu trei coloane. Cel de-al doilea element este alocat zonei principale de conținut, al treilea devine bara noastră laterală și al patrulea subsolul nostru. Și acestea nu trebuie să respecte ordinea sursă-.item-4 ar putea fi la fel de ușor de poziționat în zona antetului.
După cum puteți vedea, acest lucru face ca o pagină să fie mult mai ușoară. De fapt, în timp ce suntem în stare să reprezentăm vizual rețelele noastre, de ce să nu mergem mai departe și să folosim emojisuri?!
O pagină web dată va conține toate tipurile de componente imbricate, deci să vedem cum funcționează cu Grid.
Atunci când declarăm un container de rețea afișare: grilă; doar urmașii săi direcți devin elementele grilei. Conținutul pe care îl adăugăm acestor elemente copil va fi complet neafectat de Grid dacă nu spunem altfel.
În exemplul nostru, vom adăuga .item-5 , .elementul-6, și .item-7 înapoi în marcaj, cuibărind-i .-Item 2.
Deci, acum trebuie să ne declarăm .-Item 2 de asemenea, un container de rețea, configurarea grilei sale cu două coloane și două rânduri.
afișare: grilă; grilă-șablon-coloane: 1 de la 30%; grilă-șablon-rânduri: auto auto; grilă-decalaj: 20 pixeli; grilă-șablon-zone: "header header" "bara laterală a articolului";
Putem folosi numele "header", "article" și "sidebar" din nou aici; nu există confuzie, pentru că totul rămâne în context. Aceste zone ale rețelei se aplică numai rețelei .-Item 2.
Pentru a rezuma ceea ce am vorbit despre:
Accentsconagua
grilă coloană ne oferă o modalitate scurtă de definire a locului în care un element începe și se termină.deschidere pentru a face regulile mai flexibile.grid-șablon-zone dați-ne puterea de a numi zonele noastre de rețea (chiar dacă folosim emojis dacă starea de spirit ne duce).afișare: grilă; și urmând același proces.Încă o dată am învățat câteva aspecte utile ale spec. CSS Grid Layout și ne apropiem de cazurile de utilizare din lumea reală! În următorul tutorial vom examina unele aspecte mai complexe și vom vedea cum designul receptiv se potrivește în ecuație.
