Share
Până acum, tutorialele rețelei CSS s-au concentrat în mare măsură pe explicit valori-dimensiuni ale pieselor pe care le-am definit în mod explicit. Am folosit rânduri care au o înălțime de 200 de pixeli sau, probabil, coloane care sunt de la 1 la 1, și am afirmat în mod explicit câți dintre ei vrem. Dar dacă nu știm (sau nu vrem să ne angajăm) cât de multe melodii vrem? Aici este locul implicit valorile intră în joc - să aruncăm o privire.
Iată o rețea de bază pe care o puteți urmări. Ne dă un container cu 9 grilă. Nu au fost definite încă lățimi sau cantități ale coloanelor, astfel încât fiecare articol să umple lățimea maximă disponibilă:
Să ne imaginăm că vrem o coloană din stânga și că știm exact cât de mare ne dorim: 300px. Putem defini acest lucru prin adăugarea grilă-șablon-coloane: 300px; la containerul nostru de rețea. Dar nu vom primi alte coloane decât noi explicit definiți-le:
Adică, dacă nu spunem că vrem ca unul dintre elementele de rețea să fie plasat în (de exemplu) coloana 3 pe rândul 1:
.element-3 coloană-coloană: 3; grilă-rând: 1;
Asta ne dă apoi coloane suplimentare in afara gridul nostru definit, deoarece CSS Grid va folosi spațiul disponibil și algoritmul său de plasare automată pentru a afla unde se află toate celelalte.
Acest lucru este minunat, iar Gridul va face presupuneri chiar dacă dorim să avem mai multe coloane, fără a fi nevoie să definim fiecare. Dar dacă dorim ca acele urme implicite, oricât ar fi multe, să aibă o anumită lățime? Aici este locul grid-auto-coloane intră în joc.
Dacă dorim ca toate coloanele, în afară de primul, să fie de 100px, putem afirma implicit că:
grilă-coloane automate: 100 pixeli;
Împreună cu valoarea noastră explicită, obținem cele mai bune din ambele lumi. Aici spunem că vrem ca prima coloană să fie 1fr (că este nevoie de o fracțiune din spațiul rămas-auto ar avea același efect aici) și că orice alte coloane după aceea ar trebui să fie 100px exact:
grilă-șablon-coloane: 1fr; grilă-coloane automate: 100 pixeli;
Acest lucru ne oferă următoarele:
Și dacă afirmăm că elementul 3 ar trebui să fie plasat într-adevăr în coloana 5, pe rândul 1, Grid știe cât de largă să facă orice coloane suplimentare pentru că este implicită.
Nu ne limitam la valorile pixelilor; am putea folosi unități fracționare, unități em, chiar și minim maxim() notație pe care am discutat-o în tutorialele anterioare.
Este aproape de la sine înțeles că grid-auto-rânduri va face același lucru pentru rânduri ca grid-auto-coloane pentru coloane. Iată un exemplu, în care toate rândurile, dar primele două sunt fixate la o înălțime de 200px.
Multe dintre proprietățile Gridului au valori implicite care te vor îngriji în cazul în care nu definesc nimic diferit, dar în unele ocazii trebuie să presupunem cel puțin ceea ce vrem. Cu mărimea implicită a traseului, putem presupune dimensiunea oricăror rânduri sau coloane suplimentare, dacă acestea sunt necesare vreodată.
Accentsconagua