Înțelegerea grilei CSS: crearea unui container grilă

Acesta este începutul unei noi serii aici, la Smashing Magazine, care se concentrează pe CSS Grid Layout. În timp ce Grid este disponibil în browsere din 2017, mulți dezvoltatori nu vor fi avut încă șansa să-l folosească într-un proiect. Se pare că există o mulțime de proprietăți și valori noi asociate cu aspectul grilă CSS. Acest lucru poate face să pară copleșitor. Cu toate acestea, multe dintre detaliile specificațiilor alternează moduri de a face lucrurile, ceea ce înseamnă că nu trebuie să înveți întreaga specificație pentru a începe. Această serie își propune să vă conducă de la novice în rețea la expert - cu o mulțime de sfaturi practice de utilizare pe parcurs.

Acest articol inițial va acoperi ce se întâmplă atunci când creați un container grilă și diferitele proprietăți pe care le puteți utiliza pe elementul părinte pentru a controla grila respectivă. Veți descoperi că există mai multe cazuri de utilizare care sunt îndeplinite doar cu proprietățile pe care le aplicați containerului grilă.

În acest articol, vom acoperi:

• Crearea unui container grilă cu display: grid sau display: inline-grid ,
• Configurarea coloanelor și rândurilor cu grid-template-columns și grid-template-rows ,

• Controlul dimensiunii pistelor implicite cu grid-auto-columns și grid-auto-rows .

• Partea 1: Crearea unui container grilă

• Partea 2: linii de grilă

• Partea 3: Zone de șablon de grilă

Crearea unui container grilă

Grid, ca și Flexbox, este o valoare a proprietății de display CSS. Prin urmare, pentru a spune browserului că doriți să utilizați aspectul grilă, utilizați display: grid . După ce a făcut acest lucru, browserul vă va oferi o casetă la nivel de bloc pe elementul cu display: grid și orice copii direcți vor începe să participe într-un context de formatare grilă . Aceasta înseamnă că se comportă ca elemente de grilă, mai degrabă decât elemente normale bloc și inline.

Cu toate acestea, este posibil să nu observați imediat o diferență pe pagina dvs. Deoarece nu ați creat niciun rând sau coloană, aveți o grilă cu o singură coloană. Se generează suficiente rânduri pentru a ține toți copiii tăi direcți și se afișează unul după altul în acea singură coloană. Din punct de vedere vizual, arată exact ca elemente de bloc.

Veți vedea o diferență dacă ați avut orice șir de text, care nu este împachetat într-un element și un copil direct al containerului grilă, deoarece șirul va fi înfășurat într-un element anonim și va deveni un element grilă. Orice element care este în mod normal un element inline, cum ar fi un interval, va deveni, de asemenea, un element de grilă odată ce părintele său este un container de grilă.

Exemplul de mai jos are două elemente la nivel de bloc, plus un șir de text cu un interval în mijlocul șirului. Ajungem cu cinci elemente de grilă:

• Cele două elemente div ,
• Șirul de text înainte de interval,
• Intervalul,
• Șirul de text după interval.

Dacă inspectați grila utilizând Firefox Grid Inspector, puteți vedea pistele cu cinci rânduri care au fost create pentru elemente.

De asemenea, puteți crea o grilă inline folosind display: inline-grid ; în acest caz, containerul grilă devine o cutie la nivel inline. Cu toate acestea, copiii direcți sunt încă elemente grilă și se comportă în același mod ca elementele grilă din interiorul unei casete la nivel de bloc (este doar tipul de afișare exterioară). De aceea, containerul grilă se comportă așa cum se comportă mai sus atunci când este alături de alte casete de pe pagină.

Acest exemplu următor are o grilă urmată de un șir de text, deoarece aceasta este o grilă la nivel de linie, textul poate fi afișat alături de acesta. Lucrurile la nivel inline nu se întind pentru a ocupa tot spațiul din dimensiunea în linie în felul în care o fac lucrurile la nivel de bloc.

Notă : În viitor, vom putea să ne descriem mai bine aspectul utilizând display: block grid pentru a crea containerul nostru la nivel de bloc și display: inline grid pentru a crea un container la nivel de bloc. Puteți citi despre această modificare a specificației afișajului în articolul meu, „Săparea în proprietatea afișajului: cele două valori ale afișajului”.

Coloane și rânduri

Pentru a obține ceva care arată ca o grilă, va trebui să adăugăm coloane și rânduri. Acestea sunt create folosind proprietățile grid-template-columns și grid-template-rows . Aceste proprietăți sunt definite în specificație ca acceptând o valoare numită track-list .

Aceste proprietăți specifică, ca o listă de piese separate prin spațiu, numele liniilor și funcțiile de dimensionare a pistelor din grilă. Proprietatea grid-template-columns specifică lista de melodii pentru coloanele rețelei, în timp ce grid-template-rows specifică lista de melodii pentru rândurile grilei.

Unele valori valide ale listei de melodii sunt următoarele:

După cum puteți vedea, există multe modalități de a crea o listă de piese! Să aruncăm o privire la exact cum funcționează toate acestea, cu câteva sfaturi în ceea ce privește motivul pentru care le-ați putea folosi pe fiecare.

Utilizarea unităților de lungime

Puteți utiliza orice unități de lungime sau un procent pentru a vă crea traseele. Dacă dimensiunea pistelor este mai mică decât cea disponibilă în containerul grilă, atunci în mod implicit, pistele se vor alinia la începutul containerului, iar spațiul de rezervă va merge până la sfârșit. Acest lucru se datorează faptului că valoarea implicită a align-content și justify-content este start . Puteți să distanțați pistele grilei sau să le mutați la capătul containerului folosind proprietățile de aliniere, pe care le explic în detaliu în articolul meu „Cum să aliniați lucrurile în CSS”.

De asemenea, puteți utiliza cuvintele cheie min-content , max-content și fit-content() . Utilizarea min-content vă va oferi o piesă cât se poate de mică, fără a provoca debordare. Prin urmare, atunci când este utilizat ca dimensiune de coloană, conținutul se va încheia ușor ori de câte ori este posibil. Piesa devine dimensiunea celui mai lung cuvânt din coloană sau cel mai mare element de dimensiune fixă.

Folosirea max-content va face ca conținutul să nu facă deloc soft-wrapping. Într-o coloană, orice șir de text se va desfășura, ceea ce poate cauza depășirea.

Cuvântul cheie fit-content poate fi utilizat numai prin transmiterea unei valori. Această valoare devine valoarea maximă la care va crește această piesă. Prin urmare, piesa va acționa ca max-content cu conținutul desfășurându-se și întinzându-se până când atinge valoarea pe care ați transmis-o. În acel moment, va începe să se împacheteze în mod normal. Deci traseul dvs. poate fi mai mic decât valoarea pe care o transmiteți, dar niciodată mai mare.

Puteți afla mai multe despre dimensionare în Grid și alte metode de aspect în articolul meu „Cât de mare este cutia? Înțelegerea dimensionării în aspectul CSS”.

Dacă ajungeți cu urme care ocupă mai mult spațiu decât aveți în container, acestea se vor revarsă. Dacă utilizați procente, atunci, ca și în cazul layout-urilor float sau flex bazate pe procente, va trebui să aveți grijă ca procentul total să nu fie mai mare de 100% dacă doriți să evitați depășirea.

Unitatea fr

Grid Layout include o metodă care vă poate economisi calcularea procentelor pentru dvs. - dimensiunea pistei cu unitatea fr . Această unitate nu este o lungime și, prin urmare, nu poate fi combinată cu calc() ; este o unitate flexibilă și reprezintă spațiul disponibil în containerul grilă.

Aceasta înseamnă că, cu o listă de piese de 1fr 1fr 1fr ; spațiul disponibil este împărțit în trei și împărțit uniform între piste. Cu o listă de 2fr 1fr 1fr , spațiul disponibil este împărțit în patru și sunt date două părți pentru melodia unu - câte o parte pentru melodiile două și trei.

Ceva la care trebuie să aveți grijă este că ceea ce este împărțit în mod implicit este spațiul disponibil, care nu este spațiul total din container. Dacă oricare dintre melodiile tale conține un element de dimensiune fixă ​​sau un cuvânt lung care nu poate fi împachetat, acesta va fi aranjat înainte ca spațiul să fie împărțit.

În exemplul următor, am eliminat spațiile dintre cuvintele din ItemThree . Acest lucru a făcut un șir lung de neîntrerupt, astfel încât distribuția spațiului are loc după ce aspectul acelui articol a fost luat în considerare.

Puteți amesteca unitatea fr cu piste de lungime fixă ​​și aici devine foarte util. De exemplu, puteți avea o componentă cu două coloane de dimensiuni fixe și o zonă centrală care se întinde:

Puteți avea o componentă cu o piesă setată la fit-content(300px) și cealaltă la 1fr. Acest lucru face pentru o componentă care poate avea ceva mai mic de 300px în prima piesă, caz în care ocupă doar spațiul de care are nevoie, iar unitatea fr se extinde pentru a ocupa restul spațiului.

Dacă adăugați ceva mai mare (cum ar fi o imagine cu max-width: 100% ), prima piesă va înceta să crească la 300 px, iar unitatea fr ocupă restul spațiului. Amestecarea unității fr cu fit-content este o modalitate de a crea componente foarte flexibile pentru site-ul dvs.

Funcția repeat().

Folosirea repeat() în lista de melodii poate economisi introducerea aceleiași valori sau valori din nou și din nou. De exemplu, următoarele două linii sunt identice:

 grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(12, 1fr);

Când utilizați repeat() , valoarea de dinaintea virgulei este numărul de ori pentru a repeta lista de melodii care vine după virgulă. Lista de melodii poate avea mai multe valori. Aceasta înseamnă că puteți repeta un model de piese.

Puteți folosi funcția repeat() pentru o parte a listei de melodii. De exemplu, următoarea linie vă va oferi o pistă de 1 fr, 3 melodii de 200 px și o piesă finală de 1 fr.

 grid-template-columns: 1fr repeat(3,200px) 1fr

Pe lângă un număr înainte de virgulă pentru a indica un număr fix de ori pentru a repeta modelul, puteți utiliza și cuvintele cheie auto-fill sau auto-fit . Folosirea unuia dintre aceste cuvinte cheie înseamnă că, în loc de un număr fix de piese, containerul dvs. grilă va fi umplut cu câte piese pot încăpea.

Folosirea unei unități cu lungime fixă ​​înseamnă că, cu excepția cazului în care containerul poate fi împărțit exact la acea dimensiune, veți ajunge să rămâneți cu puțin spațiu liber. În exemplul de mai sus, containerul meu are 500 px lățime, așa că primesc două piste de 200 px plus spațiu la sfârșit.

Putem folosi o altă funcție grilă pentru a face valoarea minimă, cu orice spațiu liber distribuit pe toate pistele. Funcția minmax() are o dimensiune minimă și o dimensiune maximă. Cu un minim de 200 px și un maxim de 1 fr, obținem atâtea piese de 200 px câte se pot potrivi și pentru că maximul este de 1 fr, despre care știm deja că va împărți spațiul în mod egal, plusul este distribuit pe melodii.

Am menționat că există două cuvinte cheie posibile: auto-fill auto-fit . Dacă aveți suficient conținut pentru a umple primul rând de celule, atunci acestea se vor comporta exact în același mod. Dacă, totuși, nu o faceți (de exemplu, dacă scoatem toate articolele, cu excepția unuia din interiorul containerului de mai sus), atunci ei se comportă diferit.

Folosind auto-fill se va menține dimensiunea disponibilă a melodiei chiar dacă nu există conținut pentru a intra în ea.

Dacă, în schimb, utilizați auto-fit , melodiile goale vor fi restrânse:

Folosind Firefox Grid Inspector, puteți vedea că pistele sunt încă acolo, dar au fost prăbușite la zero. Linia de capăt a grilei noastre este încă linia 3, deoarece putem potrivi două piste.

Liniile numite

Exemplul meu final de mai sus a folosit abordarea liniilor numite. Când utilizați Grid. aveți întotdeauna numere de linie, cu toate acestea, puteți denumi liniile. Liniile sunt numite între paranteze pătrate. Puteți avea mai multe nume pentru o linie; în acest caz, un spațiu îi separă. De exemplu, în următoarea listă de melodii, toate liniile mele au două nume.

 grid-template-columns: [main-start sidebar-start] 1fr [sidebar-end content-start] 4fr [content-end main-end]

Puteți numi liniile dvs. orice doriți, cu excepția cuvântului span , deoarece acesta este un cuvânt rezervat, deoarece este utilizat atunci când plasați elemente pe grilă.

Notă : în următorul articol din această serie, voi vorbi mai multe despre plasarea pe bază de linii și despre cum sunt utilizate liniile numite. Între timp, citiți articolul meu despre „Numirea lucrurilor în aspectul grilă CSS” pentru a vă ajuta să aflați mai multe despre acest subiect.

Grila explicită vs. implicită

Când creați o grilă folosind grid-template-columns și grid-template-rows cu o listă de melodii, creați ceea ce se numește grila explicită . Aceasta este grila pe care ați definit-o și care are dimensiunea pe care ați ales-o pentru fiecare piesă.

Dacă aveți mai multe articole decât pot încăpea sau plasați un element astfel încât să nu se încadreze în limitele grilei pe care ați creat-o, Grid va crea urme în grila implicită . Aceste piese implicite vor fi dimensionate automat în mod implicit. Am văzut această grilă implicită în acțiune când am declarat display: grid pe elementul părinte și rânduri create de grilă, câte unul pentru fiecare articol. Nu am definit aceste rânduri, dar deoarece existau elemente de grilă, liniile de rând au fost create pentru a le oferi unde să meargă.

Puteți seta o dimensiune pentru rândurile sau coloanele implicite utilizând proprietățile grid-auto-rows sau grid-auto-columns . Aceste proprietăți au o listă de melodii, așa că dacă doriți ca toate coloanele implicite să aibă o înălțime de cel puțin 200 de pixeli, dar să crească dacă există mai mult conținut, puteți utiliza următoarele:

 grid-auto-rows: minmax(200px, auto)

Dacă doriți ca primul rând implicit să fie dimensionat automat, iar al doilea să aibă dimensiunea min-content și așa mai departe (până când toate elementele din grilă au fost găzduite), puteți trece mai multe valori:

grid-auto-rows: auto 100px

Utilizarea unei grile cu plasare automată

Crearea unei grile (și permiterea browserului să plaseze automat elemente) vă aduce un drum lung în ceea ce privește modelele utile pe care le puteți obține. Încă nu ne-am uitat la plasarea elementelor pe grilă, dar multe aspecte care folosesc Grid nu fac nicio plasare. Ei se bazează pur și simplu pe plasarea elementelor în ordinea sursei - câte unul în fiecare celulă de grilă.

Dacă sunteți nou la CSS Grid, atunci să jucați cu diferite dimensiuni de piesă și să vedeți cum se plasează elementele în celulele pe care le creați este o modalitate excelentă de a începe.

• Partea 1: Crearea unui container grilă
• Partea 2: linii de grilă
• Partea 3: Zone de șablon de grilă