Accentsconagua
Share
Într-una dintre tutorialele introductive introductive către CSS Grid am analizat coloanele cu fluid și jgheaburile mai bune. Am aflat că nu este necesar să specificăm exact unde vrem să poziționăm elementele rețelei noastre; dacă declarăm proprietățile rețelei noastre, Grid va introduce sloturile în funcție de algoritmul de plasare automată.
În acest tutorial vom examina modul în care algoritmul se referă la activitatea sa și la modul în care o putem influența.
Dacă browserul dvs. nu este configurat pentru a suporta Gridul, va trebui să-l sortați pe acesta să urmați. Citeste acest:
Iată o rețea demo pentru a elimina lucrurile; este un container pe care l-am declarat a fi afișare: grilă; și deține optsprezece elemente copil. Am afirmat că ar trebui să aibă cinci coloane, fiecare cu o lățime egală, cel puțin aceeași cantitate de rânduri și un jgheab îngust în jurul a 2 pixeli.
grilă-șablon-coloane: repeat (5, 1fr); grilă-șablon-rânduri: repeat (5, 1fr); grilă-decalaj: 2 pixeli;
Până acum, așa de bine, și puteți vedea că Grid a luat cele optsprezece articole și le-a împins, lucrând din stânga sus, trecând spre dreapta, apoi mutându-se în ordine în ordine. Acest comportament este asemănător cu modul în care plutesc lucrurile.
Notă: comportamentul de la stânga la dreapta ar fi inversat dacă avem de-a face cu a direcție: RTL; schemă.
Asta e frumos și curat, dar să vedem ce se întâmplă atunci când articolele noastre nu se potrivesc atât de perfect. La .item-7 vom adăuga câteva reguli care să o facă mai mari, acoperind două coloane și două rânduri:
.element-7 background: # e03f3f; grilă-coloană: intervalul 2; grilă-rând: span 2;
Cum arată asta acum?
Nu prea rau! .item-7 umple mai mult spațiu, deci .item-8 și .item-9 sunt poziționate mai departe. .item-10 apoi caută să vadă dacă există un spațiu liber lângă el .item-9, și când vede că nu se mișcă jos un rând și pornește din nou pe extrema stângă. Celelalte elemente continuă să se aseze în același mod.
Dar așteptați, dacă facem și noi .item-9 puțin supraponderal?
Acum devine interesant; .item-9 nu se mai potrivește în coloană la sfârșit, așa că este împins în următorul rând. Deoarece nu se poate încadra în nimic dincolo .item-7 ea rămâne pusă. .item-10, s-ar putea să vă imaginați .elementul-6 din nou, dar, dacă vă aduceți aminte, căutând o coloană liberă, atunci, dacă nu se mișcă în jos un rând și se deplasează din nou spre stânga. Acesta este un concept important de înțeles.
Dacă te uiți la demo-ul precedent vei vedea asta .item-18, după ce nu a găsit spațiu lângă .item-17, sa mutat pe un rând. De fapt, am definit doar cinci rânduri, dar Grid a presupus că vom dori un nou rând pe care să-l abordăm. Acest lucru se datorează grid-auto-flow, care aparține elementului grilei și a căror valoare implicită este rând. Putem schimba această valoare coloană dacă vrem, ceea ce ar schimba complet modul în care arată rețeaua noastră:
Asta arată un fel de similar, dar veți observa că elementele noastre au fost introduse în partea stângă sus, apoi s-au mutat în jos pentru a umple fiecare rând, apoi s-au mutat în cea de-a doua coloană și așa mai departe. Deci, acum, când un element este prea mare pentru cizme, următorul element caută următorul spațiu de rând vacant, apoi nu reușește să treacă la coloana următoare.
Putem adăuga un alt cuvânt cheie la adresa noastră grid-auto-flow proprietate și este probabil cuvântul cheie CSS preferat până acum: dens. Corespondentul său implicit este rar (al doilea favorit al meu). Să facem următoarele:
grilă-curgere automată: rând dens;
Notă: nu trebuie să includem rând aici, este implicit, dar acest lucru evidențiază modul în care funcționează sintaxa.
Acum prietenul nostru .item-10, după ce a constatat că nu există nici un spațiu lângă .item-9, verifică mai întâi ce e de mai sus înainte de a trece la un alt rând.
Datorită acestei modificări a algoritmului de plasare, elementele noastre sunt acum ambalate dens, ceea ce ne oferă o grilă mai eficient umplută. Aceasta înseamnă totuși că aspectul vizual nu reflectă neapărat ordinea surselor de documente, care nu este întotdeauna utilă utilizatorului.
Să recapitulăm:
grid-auto-flow din rând la coloană.grid-auto-flow acceptă un cuvânt cheie pentru a descrie abordarea "ambalare". Implicit, această valoare este rar, dar putem modifica acest lucru dens care încearcă să completeze toate lacunele disponibile.