Ghid de configurare a rețelei CSS Fr
Modul de configurare a rețelei CSS a fost expediat cu noua unitate CSS numit fr unitate. La fel de simplu cum poate fi, fr este abrevierea cuvântului “fracțiune”. Noua unitate face posibilă șlefuirea rapidă a coloanei în coloane sau rânduri proporționale. Ca urmare, crearea de grilaje flexibile și complet flexibile devine aproape o briză.
Pe măsură ce unitatea fracțiunii a fost introdusă împreună cu modulul Grid Layout, îl puteți utiliza în orice browser care îl utilizează sprijină grila CSS. Dacă doriți, de asemenea, să acceptați browsere mai vechi, aici este un lucru minunat CPS grilă polyfill care vă permite să utilizați nu numai fr unitate, dar și alte caracteristici ale rețelei.
Utilizare de bază
În primul rând, să aruncăm o privire la a rețea de bază care utilizează unitatea fracțiunii. Schema de mai jos împarte spațiul în trei coloane cu aceeași lățime și două rânduri de înălțime egală.
HTML-ul aparținând lui este compus din șase div marcate cu .cutie clasă, în interiorul a .învelitoare div.
1.2.3.4.5.6.
Pentru a utiliza modulul Grid Layout, trebuie să adăugați afișare: grilă; Proprietatea CSS în pachet. grilă matriță coloane proprietatea utilizează fr unitate ca valoare; raportul dintre cele trei coloane este 1: 1: 1.
Pentru rândurile de grilă (grid-șablon rânduri proprietate), nu am folosit fr unitate, deoarece are sens doar dacă ambalajul are o înălțime fixă. În caz contrar, poate avea rezultate ciudate pe unele dispozitive, cu toate acestea, chiar și atunci, fr unitate menține raportul (și acest lucru este imens).
grid-gap proprietate adaugă o grilă de 10px în interiorul cutiilor. Dacă nu vreți vreun decalaj să eliminați această proprietate.
.înveliș display: grilă; grilă-șablon-coloane: 1fr 1fr 1fr; grilă-șablon-rânduri: 200px 200px; grilă-decalaj: 10 pixeli; .box culoare: alb; text-align: centru; font-size: 30px; padding: 25px;
Rețineți că CSS de mai sus nu conține un stil de bază, cum ar fi culorile de fundal. Poti găsiți codul complet în demo la sfârșitul articolului.
Raportul de schimbare
Desigur, nu puteți folosi doar 1: 1: 1, ci orice rație doriți. Mai jos, am folosit 1: 2: 1 fracții care de asemenea împart spațiul în trei coloane dar coloana din mijloc va fi de două ori mai largi ca și celelalte două.
De asemenea, am crescut valoarea grid-gap astfel încât să puteți vedea cum modifică aspectul. Practic, browser-ul deduce decalajul de rețea din lățimea ferestrei de vizualizare (în acest exemplu, decalajele rețelei adaugă până la 80 de pixeli) și taie restul conform fracțiunilor date.
.înveliș display: grilă; grilă-șablon-coloane: 1fr 2fr 1fr; grilă-șablon-rânduri: 200px 200px; grilă-decalaj: 40px;
Combina fr cu alte unități CSS
Poti combina fr unitate cu orice alte unități CSS de asemenea. De exemplu, în exemplul de mai jos, am folosit 60% 1fr 2fr pentru grila mea.
Deci, cum funcționează acest lucru? browserul atribuie 60% din lățimea ferestrei de vizualizare la prima coloană. Apoi, ea împarte restul spațiului în fracțiuni de 1: 2.
Același lucru ar putea fi scris și ca 60% 13.33333% 26.66667%. Dar sincer, de ce ar vrea cineva să folosească formatul respectiv? Un avantaj uriaș al unității fracționare este că acesta este îmbunătățește citirea codului. Mai mult, este complet exacte, deoarece formatul procentual se adaugă până la 99,9999%.
.înveliș display: grilă; grilă-șablon-coloane: 60% 1fr 2fr; grilă-șablon-rânduri: 200px 200px; grilă-decalaj: 10 pixeli;
În afară de procente, puteți utiliza și alte unități CSS împreună cu unitatea fracțiunii, de exemplu pt, px, em, și rem.
Adăugați spațiul alb cu fr
Dacă nu doriți ca designul dvs. să fie aglomerat și adăugați niște spații albe la grilă? Unitatea fracție are, de asemenea, o soluție simplă pentru aceasta.
După cum puteți vedea, această grilă are o coloană goală în timp ce încă mai păstrează toate cele șase casete. Pentru acest aspect, trebuie să alunecăm spațiul în patru coloane în loc de trei. Deci, folosim 1fr 1fr 1fr 1fr valoare pentru grilă matriță coloane proprietate.
Adăugăm coloana goală în interiorul lui grid-șablon-zone proprietate, folosind notație punct. Practic, această proprietate vă permite să referință denumită zone de rețea. Și, puteți numi zonele de rețea cu grid-area proprietate pe care trebuie să o utilizați separat pentru fiecare zonă.
.înveliș display: grilă; grilă-șablon-coloane: 1fr 1fr 1fr 1fr; grilă-șablon-rânduri: 200px 200px; grilă-decalaj: 10 pixeli; grilă-șablon-zone: "cutie-1 cutie-2" cutie-3 "" cutie-4 cutie-5. .box-1 zona grilă: caseta-1; .box-2 zona grilă: caseta-2; .box-3 zona grilă: caseta-3; .box-4 zona grilă: caseta-4; .box-5 zona grilă: caseta-5; .box-6 zona grilă: caseta-6;
Zonele cu spații albe nu trebuie neapărat să formați o coloană, ei poate fi oriunde în rețea.
repeta() funcţie
De asemenea, puteți utiliza funcția fr unitate împreună cu repeta() funcţie Pentru o simplă mai simplă. , acest lucru nu este necesar dacă aveți doar o rețea simplă, dar puteți veni la îndemână atunci când doriți implementa un aspect complicat, de exemplu a gratar imbricat.
.înveliș display: grilă; grilă-șablon-coloane: repeat (3, 1fr); / * grilă-șablon-coloane: 1fr 1fr 1fr; * / grilă-șablon-rânduri: 200px; grilă-decalaj: 10 pixeli;
repetați (3, 1fr) sintaxă rezultă în același aspect la fel de 1fr 1fr 1fr. Schema de mai jos este identică cu primul exemplu.
daca tu măriți multiplicatorul în interiorul repeta() veți avea mai multe coloane. De exemplu, repetați (6, 1fr) rezultatele în șase coloane egale. În acest caz, toate casetele noastre va fi în același rând, ceea ce înseamnă că este suficient să utilizați o singură valoare (200px) pentru grid-șablon rânduri proprietate.
.înveliș display: grilă; grilă-șablon-coloane: repeat (6, 1fr); grilă-șablon-rânduri: 200px; grilă-decalaj: 10 pixeli;
Poți să folosești repeta() mai mult de o dată. De exemplu, următorul exemplu are ca rezultat o rețea în care sunt ultimele trei coloane de două ori mai largi ca primele trei.
.înveliș display: grilă; grilă-șablon-coloane: repeat (3, 1 fr) repetare (3, 2fr); grilă-șablon-rânduri: 200px; grilă-decalaj: 10 pixeli;
Poti de asemenea combina repeta() cu alte unități CSS. De exemplu, ați putea folosi 200px repetare (4, 1fr) 200px ca un cod valid.
Dacă sunteți interesat de cum să creați structuri complexe cu modulul CSS Grid, repeta() și funcția fr unitatea Rachel Andrew are o postare interesantă pe blog despre cum poți face asta.
Demo pentru experimentare
In cele din urma, iată demo-ul pe care l-am promis. Utilizează același cod ca primul exemplu din acest articol. Fork it, și vezi ce puteți obține cu fr unitate.
