Share
În orice rețea CSS, fiecare linie are un număr de index pe care îl putem referi la elemente de rețea. Cu toate acestea, putem numi, de asemenea, fiecare dintre aceste linii de rețea, ceea ce face mai ușor să lucrăm cu și să ne menținem structurile rețelei. Hai să aruncăm o privire!
Răspunsul cel mai comun la orice tutorial Grid este "dar când pot folosi acest lucru?" Și este o întrebare corectă. Faptul este: Grid este vine, și va fi aici în curând.
"CSS Grid va deveni acceptat implicit în Chrome și Firefox în martie 2017." - Eric Meyer
Dacă nu ați aruncat o privire la ea încă, acum este timpul!
Atunci când declarăm o rețea, fiecare linie primește un număr de index:
Notă: Cu excepția cazului în care aspectul este setat cu direcție: rtl;, aceste numere încep în partea stângă sus a grilajului, mergând în dreapta jos.
Putem menționa aceste numere pentru a plasa elementele rețelei:
.element grilă-coloană: 2; grilă-rând: 3;
În acest exemplu .articol elementul este poziționat pornind de la linia 2 a coloanei și linia rândului 3:
Cu grile mai complexe, vă puteți imagina că referirea la toate numerele ar putea deveni puțin confuză. Din acest motiv, modulul Grid ne permite să ne numim în mod explicit liniile atunci când ne declarăm coloanele și rândurile din rețea.
Să folosim un exemplu ca cele pe care le-am folosit în această serie. Iată declarația noastră de bază de 3 x 3:
.grilă-1 display: grilă; grilă-șablon-coloane: 100px auto 100px; grilă-șablon-rânduri: 60px 130px 50px; grilă-decalaj: 20 pixeli;
Acum ne putem împacheta valorile coloanelor și rândurilor cu numele liniilor (indiferent de heck-ul pe care îl dorim), folosind paranteze pătrate:
.grilă-1 display: grilă; grilă-șablon-coloane: [start] 100px [centru-start] auto [last-column-start] 100px [finalizare]; grilă-șablon-rânduri: [header-start] 60px [principală-start] 130px [main-end] 50px [rând-sfârșit]; grilă-decalaj: 20 pixeli;
Acum putem poziționa elementele cu nume, în loc de numere:
.element grilă-coloană: centru-început; grilă-rând: header-start;
Unele indicii:
Accentsconagua
[linia de sus a paginii principală-5] etc.Când facem în mod deliberat lucruri, cum ar fi numirea liniilor de rețea, se spune că este explicit. Când ceva este implicit, dar nu este specificat în mod direct, acest lucru se numește "ființă" implicit. Am acoperit în mod explicit numirea liniilor de rețea, dar există și circumstanțe în care liniile sunt denumite implicit.
Este posibil să rețineți dintr-un tutorial anterior că este posibil să definiți zonele de rețea.
S-ar putea defini patru zone de grila astfel:
.grid-1 / * ... stilurile existente * / grid-template-areas: "antetul antetului header" "main bar principal" "footer footer footer";
Acest lucru ne oferă următoarele:
Denumirea unei zone de rețea antet atribuie automat și numele celor patru linii de graniță. Rândurile din jurul ei devin antet start- și header-end, și de asemenea cele două linii ale coloanelor devin, de asemenea antet start- și header-end. Același lucru este valabil și pentru celelalte zone, care au nume de linie principal de pornire, Principalul-end, Sidebar start- si asa mai departe.
Notă: Privind lucrurile în sens invers, adăugând în mod explicit linii numite în același format (antet start- și header-end) va crea o zonă de rețea numită antet.
Putem folosi aceste nume de linii ca și noi, pentru poziționarea elementelor. Și din nou, ele există în plus față de orice nume pe care tu îl definiți și numerele indexului original.
Asta e pentru acest sfat rapid! Amintiți-vă: obișnuiți să vă numiți liniile și zonele pentru o gestionare și întreținere mai ușoară a rețelei.
