Cât de mare este cutia aceea? Înțelegerea dimensionării în aspectul CSS

O caracteristică cheie a Flexbox și Grid Layout este că se pot ocupa de distribuirea spațiului disponibil între, în jurul și în interiorul grilei și elementelor flexibile. Destul de des, acest lucru funcționează și obținem rezultatul pe care îl speram fără a încerca foarte mult. Acest lucru se datorează faptului că specificațiile încearcă să respecte cele mai probabile cazuri de utilizare. Uneori, totuși, s-ar putea să vă întrebați de ce ceva ajunge la dimensiunea care este. Sau, poate doriți să faceți ceva diferit de comportamentul implicit. Pentru a face acest lucru, trebuie să știți ceva despre modul în care algoritmii de bază își dau seama cum să distribuie spațiul.

În acest articol, voi împărtăși cu voi câteva lucruri interesante despre dimensionarea casetelor în CSS. Am ales câteva lucruri din specificații care cred că sunt vitale pentru a înțelege exact cât de mare este acea cutie. Luați puțin timp pentru a citi și cred că veți găsi dimensionarea în Grid mult mai puțin misterioasă!

Unități de lungime

Putem începe cu dimensiunea care este probabil cea mai familiară. Unitățile de lungime descrise în specificația modulului Valori și unități CSS. Dacă vedeți <length> ca valoare permisă pentru o proprietate CSS, atunci înseamnă una dintre valorile enumerate aici. Aceste valori sunt toate distanțe și vor consta de obicei dintr-un număr întreg, plus identificatorul unității - de exemplu 12px sau 1em . Dacă valoarea este 0 , identificatorul unității poate fi omis. De asemenea, unitățile de lungime sunt împărțite în lungimi relative și absolute.

Lungimi relative

O lungime relativă ia dimensionare în raport cu alt lucru și, prin urmare, dimensiunea finală a ceva definit folosind o lungime relativă poate fi diferită dacă lucrul la care este relativ se modifică.

Setul complet de unități relative este după cum urmează. Primele patru unități sunt legate de font, în timp ce ultimele patru sunt relative de vizualizare.

• em
• ex
• ch
• rem
• vw
• vh
• vmin
• vmax

Deoarece aceste valori sunt relative la ceva, este important să identificăm exact la ce sunt relativ. Pentru unitatea relativă de font rem , aceasta este întotdeauna relativă la dimensiunea elementului rădăcină care este un document HTML este elementul html .

În primul exemplu de mai jos, am setat elementul html să aibă o dimensiune a fontului de 20 de pixeli. 1rem este deci 20 de pixeli. Dacă apoi dau unui element o lățime de 10rem , acesta va deveni 200 de pixeli lățime (deoarece 20px înmulțit cu 10 este 200).

Când celelalte unități relative ale fontului ( em , ex și ch ) sunt utilizate pentru lungimea unui element, acestea sunt relativ la dimensiunea fontului aplicată acelui element. În al doilea exemplu (lățimea casetei este de 10em ), unitatea em se uită la fontul aplicat elementului pe care îl dimensionează și calculează pe baza acestuia. Deci, această casetă devine lățimea de 300 de pixeli, deoarece dimensiunea fontului casetei este de 30 de 30px .

Acolo unde unitățile relative ale fontului sunt calculate din dimensiunea fontului, unitățile relative ale ferestrei de vizualizare sunt calculate în raport cu un dreptunghi cunoscut sub numele de blocul care conține inițial . Pe un ecran, acesta are dimensiunile ferestrei de vizualizare. Unitatea vw are ^1/100 din lățimea ferestrei și _vh vh din _înălțime ^. O cutie care are o lățime de 50vw și o înălțime de 50vh ar trebui să aibă jumătate din lățimea și jumătate din înălțimea ferestrei de vizualizare.

Unitățile vmin și vmax sunt utile deoarece vă permit să dimensionați ceva în raport cu dimensiunea mai mare sau mai mică a ferestrei de vizualizare. Aceasta înseamnă că puteți face ceva 50% din partea cea mai lungă a ferestrei de vizualizare, de exemplu. Acest lucru este util în special atunci când cineva poate ține un dispozitiv în modul peisaj sau portret. Unitatea vmin se rezolvă întotdeauna la mic sau vw sau vh și vmax la cel mai mare dintre vw sau vh . Prin urmare, dacă doriți ca o lățime să fie întotdeauna de 20% din cea mai lungă parte a dispozitivului, puteți utiliza 20vmax . Dacă dispozitivul este ținut în modul portret, atunci 20vmax ar fi același cu 20vh . Dacă dispozitivul este ținut în modul peisaj, ar fi același cu 20vw .

Exemplul de mai jos compară un bloc cu dimensiunea vw și vh cu o dimensiune folosind vmin și vmax . Pe un computer desktop sau pe un telefon în modul peisaj, ambele casete ar trebui să aibă aceeași dimensiune. Comutați un telefon în modul portret sau trageți fereastra astfel încât lățimea să devină mai mică decât înălțimea și veți vedea cum al doilea bloc modifică dimensiunea de la care ia calculul.

Unități absolute

Unitățile absolute se mapează la dimensiunile fizice și nu se scalează în raport cu alte lucruri de pe ecran. Prin urmare, ele sunt cele mai utile atunci când mediul de ieșire este cunoscut.

Lista de mai jos arată unitățile absolute permise în CSS:

• cm
• mm
• Q
• in
• pc
• pt
• px

După cum puteți vedea, multe dintre acestea au puțin sens într-un context de ecran, totuși, dacă creați CSS pentru imprimare, atunci folosirea pt sau in ar putea avea foarte mult sens când știți dimensiunea hârtiei.

Pixelul este clasificat ca o unitate de lungime absolută și, după cum știe oricine care a creat imagini pentru dispozitivele cu retină, un pixel din punct de vedere al lungimii nu este același lucru cu un pixel al dispozitivului. CSS folosește conceptul de pixel de referință , iar specificațiile recomandă ca unitatea de pixeli să se refere la numărul întreg de pixeli ai dispozitivului care aproximează cel mai bine pixelul de referință.

Pixelul de referință este unghiul vizual al unui pixel pe un dispozitiv cu o densitate de pixeli de 96 dpi și o distanță de la cititor de o lungime a unui braț. Pentru o lungime nominală a brațului de 28 inci, unghiul vizual este, prin urmare, de aproximativ 0,0213 grade. Pentru citirea la distanță, 1px corespunde astfel la aproximativ 0,26 mm ( ¹ / ₉₆ inch). — „Modulul Valori și unități CSS Nivelul 3”, W3C

Procente

În cele mai multe cazuri, puteți utiliza un procent mai degrabă decât o unitate de lungime pentru dimensiune. Acest procent va trebui apoi calculat în raport cu ceva, în același mod în care se rezolvă o unitate de lungime relativă, iar specificația pentru metoda de aspect pe care o utilizați va indica ceea ce procentul ar trebui să fie un procent de .

Într-o specificație, în care vedeți <length-percentage> ca o valoare permisă pentru o lungime, aceasta înseamnă că procentul va fi rezolvat la o lungime înainte de a fi utilizat. În exemplul de mai jos, elementul exterior are o lățime de 400 de pixeli, iar primul element copil o lățime de 50%. Aceasta se rezolvă apoi la 200 de pixeli - 50% din 400.

Al doilea element copil are o lățime care folosește calc , pentru a adăuga 50 de pixeli la 50%, făcând acel bloc să aibă o lățime de 250 de pixeli. Prin urmare, 50% este rezolvat la o lungime și apoi utilizat în calcul.

Aceia dintre noi care au lucrat pe web în era designului responsive s-au obișnuit să folosească procente pentru a crea machete care arată ca și cum ar fi așezate pe o grilă. Lucrul în procente ne oferă un anumit grad de control, control la care trebuie să începem să renunțăm pentru a utiliza pe deplin puterea Grid și Flexbox!

Dimensiune intrinsecă și extrinsecă CSS

Până acum, ne-am uitat la modul în care putem da cutiilor o dimensiune, le putem stabili lățimea și înălțimea într-o varietate de moduri, precum și cum să folosim unitățile de lungime și procentele. Cu toate acestea, casetele de pe pagina dvs. web au o dimensiune – chiar dacă nu le-ați dat una . Este important să înțelegeți cum sunt așezate elementele pe pagină și că dimensiunea devine din ce în ce mai importantă atunci când utilizați flexbox și aspectul Grid. O mare parte din flexibilitatea încorporată în Grid și flexbox vine pentru că gestionează situații în care există mai mult spațiu decât este necesar pentru afișarea articolelor sau articolele trebuie să se încadreze în mai puțin spațiu decât ar ocupa dacă spațiul ar fi infinit.

Modulul care definește ce dimensiune sunt lucrurile și vă oferă modalități suplimentare de a controla dimensiunea respectivă este Modulul de dimensionare intrinsecă și extrinsecă CSS. În această secțiune următoare, vom arunca o privire la ceea ce definește acest modul și de ce este vital pentru înțelegerea dvs. a aspectului în flexbox și grid.

Dimensiunea cuvintelor cheie

Rezumatul modulului spune:

Acest modul extinde proprietățile de dimensionare CSS cu cuvinte cheie care reprezintă dimensiuni „intrinsece” bazate pe conținut și dimensiuni „extrinseci” bazate pe context, permițând CSS să descrie mai ușor casetele care se potrivesc conținutului lor sau se potrivesc într-un anumit context de aspect.

Cuvintele cheie pot fi folosite pentru oricare dintre proprietățile care în mod normal au o lungime. De exemplu, width , height , min-width și așa mai departe, pe lângă faptul că sunt specificate pentru utilizare în dimensiunea pistei Grid Layout și flexbox flex-basis . Valorile cuvintelor cheie așa cum sunt definite în versiunea curentă a editorului a specificației de bază de nivel 3 sunt:

• max-content
• min-content
• fit-content(<length-percentage>)

Să aruncăm o privire la cum se comportă unele dintre aceste cuvinte cheie dacă le folosim pentru lățimea unui div. Un div este un element la nivel de bloc și, prin urmare, dacă nu îi dați o lățime, se va întinde pentru a fi cât mai lat în dimensiunea inline. Fie până când ajunge la marginea ferestrei de vizualizare sau la blocul care îl conține.

Dacă un șir de text este mai lung decât spațiul permis, se va înfășura în interiorul div-ului, iar caseta va deveni mai înaltă pentru a-l găzdui. Pentru a da div-ului o lățime diferită de spațiul permis de blocul care îl conține, puteți utiliza oricare dintre unitățile de lungime discutate anterior. Textul ar începe apoi să se înfășoare de îndată ce atinge acea lungime.

În loc să constrângeți caseta folosind o lungime sau prin aceasta să loviți marginile blocului care conține, este posibil să doriți să permiteți conținutului să dicteze dimensiunea. Aici intervin aceste noi cuvinte cheie de dimensionare bazate pe conținut.

min-conținut

Utilizați width: min-content pe div, iar div-ul devine acum doar atât de mare cât trebuie, conținutul devenind cât mai mic posibil în direcția inline. Cu un șir de text, aceasta înseamnă că textul profită de toate oportunitățile de împachetare soft pe care le poate.

Aceasta este dimensiunea minimă a conținutului acestui element. Cel mai mic pe care îl poate obține fără ca niciun conținut să se reverse într-un fel.

max-conținut

Comportamentul opus se întâmplă dacă folosim width: max-content . Acum, caseta devine suficient de mare pentru a conține conținutul dacă devine cât mai mare posibil în dimensiunea inline. Șirul nostru de text se întinde acum și nu se împachetează deloc. Acest lucru va provoca debordări în cazul în care devine mai lată decât lățimea disponibilă în care trebuie să crească acest div.

Aceste cuvinte cheie de conținut sunt trimise în browsere, le puteți utiliza în Chrome și, de asemenea, prefixate în Firefox ca valoare pentru width și height . Le puteți folosi pentru dimensionarea pistelor în Grid Layout, așa cum vom explora mai jos, încă nu sunt implementate pentru flex-basis în Flexbox. Cu toate acestea, motivul real pentru a le privi acum este să înțelegem că min-content max-content există , deoarece lucrurile care au o dimensiune minimă și maximă de conținut sunt importante odată ce începem să ne uităm la modul în care este distribuit spațiul în Flexbox și Grid.

Dimensiunea bazată pe conținut în aspectul grilă CSS

CSS Grid Layout are o implementare solidă a cuvintelor cheie de conținut pe care tocmai le-am explorat, folosite pentru a dimensiona pistele grilei. Aceasta înseamnă că puteți determina conținutul să dicteze dimensiunea pistei pe grilă. Lucrul important de reținut cu grila este că este un model de aspect bidimensional. Dacă cereți unei piese de coloană să devină dimensiunea min-content , atunci pista va dimensiona în funcție de cel mai lat lucru din pistă.

min-conținut

În exemplul următor, am o grilă de piste cu trei coloane. Coloanele sunt dimensionate folosind cuvântul cheie min-content . Una dintre celule conține mai mult conținut și puteți vedea cum se înfășoară conținutul acolo unde este capabil. Dimensiunea necesară pentru a afișa acest conținut la dimensiunea min-content devine dimensiunea întregii piese.

Vedeți conținutul minim al creionului în Grid Layout de Rachel Andrew (@rachelandrew) pe CodePen.

max-conținut

Dacă ne uităm la același exemplu ca pentru min-content dar schimbăm coloanele pentru fiecare utilizare max-content , puteți vedea cum melodia care conține un articol cu ​​mult text a crescut pentru a se adapta textului. Acest lucru a făcut ca pistele să fie mai largi decât dimensiunea elementului pe care ne-am definit grila, așa că s-a revărsat.

potrivire-conținut

Un cuvânt cheie pe care nu l-am analizat încă și care a fost implementat în Grid Layout este fit-content . Acest cuvânt cheie ia o lungime sau un procent ca valoare. Când utilizați fit-content pentru dimensiunea melodiei, melodia va acționa ca max-content până când ajunge la dimensiunea valorii pe care ați transmis-o. Odată ce atinge această dimensiune, melodia va înceta să crească, iar conținutul se va încheia.

Toate cele trei coloane din exemplul de mai jos sunt dimensionate folosind fit-content(10em) . Dacă pista ar fi mai îngustă de 10 em, se comportă ca max-content . Pista centrală care ar rula mai mult nu mai crește odată ce ajunge la 10em.

Notă : am creat un scurt tutorial video pentru a demonstra aceste cuvinte cheie pentru dimensionarea conținutului .

Piese cu dimensiuni automate

Înainte de a săpa mai adânc în gaura de iepure a dimensionării șinei, este, de asemenea, important să înțelegeți ce înseamnă auto atunci când este utilizat pentru dimensionarea șinei. Traseele de grilă implicite sunt create cu dimensionare auto și, de obicei, veți înțelege acest lucru atunci când începeți să utilizați Grid. Specificați urmele coloanelor, dar apoi plasați conținutul în rânduri fără o definiție explicită. Piesele rândurilor cresc pentru a conține conținut, deoarece se uită auto la dimensiunea conținutului și creează o piesă suficient de înaltă pentru a o conține.

Cu toate acestea, auto are o semnificație specifică în specificații. În cazul Grid și flexbox, dacă utilizați auto pentru dimensiunea unei piese sau ca valoare a flex-basis , va căuta să vadă dacă există vreo dimensiune pe articol (sau pe orice articol din acea pistă pentru Grid) și utilizați acea dimensiune ca dimensiune a pistei de bază sau ca valoare a flex-basis . Puteți vedea că acest lucru se întâmplă în CodePen de mai jos. Primul exemplu este un aspect Grid, al doilea un aspect Flex. Aspectul Gridului are trei coloane cu dimensiuni auto , fiecare element din aspectul Flex poate crește și se micșorează dintr flex-basis de auto .

În ambele aspecte, articolul final are o lățime de 200 px. Puteți vedea cum este utilizată acea lățime atunci când se elaborează dimensiunea pistei. Devine flex-basis base ca ultimul element și dimensiunea de bază pentru pistele grilei. Pentru celelalte piese Grid și elemente flexibile, nu există lățime, așa că algoritmul folosește dimensiunea conținutului.

Vom reveni la modul în care se comportă auto și la modul în care poate fi util în combinație cu alte metode de dimensionare a pistelor după ce trecem la o altă modalitate de a dimensiona pistele grilei.

fr Unități

Toate unitățile de lungime discutate la începutul acestui articol pot fi, de asemenea, utilizate pentru dimensionarea pistelor în structurile de grilă. Avem și o unitate suplimentară în unitatea fr . Acest lucru se aplică numai aspectului grilei și, prin urmare, este detaliat în specificația grilei, mai degrabă decât în ​​oricare dintre modulele referitoare la dimensionare. Unitatea fr este o lungime flexibilă sau <flex> și reprezintă o fracțiune din spațiul rămas în containerul grilă.

Unitatea fr nu este o lungime și nu poate fi utilizată cu calc() în același mod în care poate o unitate procentuală sau de lungime.

Veți vedea adesea un demo ca cel de mai jos, în care am creat trei piese de dimensiuni egale folosind unitatea fr . Spațiul din containerul grilă a fost împărțit în trei și alocat fiecărei piese în mod egal.

Unitatea fr de aici se comportă la fel cum se comportă Flexbox dacă flex-basis este 0 . Grid ocupă tot spațiul din containerul grid și dă o parte fiecărei piese. Cu toate acestea, Grid nu va provoca debordarea unei piese atunci când faceți acest lucru. Acest comportament poate fi confuz dacă aveți impresia că trei piese de 1fr vor fi întotdeauna trei piese de dimensiuni egale.

Dacă adăugăm un cuvânt foarte lung în piesa noastră din mijloc, care nu poate înfășura moale, de exemplu Supercalifragilisticexpialidocious , atunci nu obținem trei coloane cu lățime egală.

Grid împarte spațiul disponibil doar după ce se asigură că pistele sunt suficient de mari pentru a conține elementele. Grid se uită la dimensiunea pistei dacă am folosi min-content . Dacă dimensiunea respectivă este mai mică decât dimensiunea care va fi transmisă piesei prin unitatea fr , atunci conținutul nu este luat în considerare. Dacă dimensiunea min-content este mai mare decât ar fi dată piesa de unitatea fr , atunci dimensiunea min-content este utilizată pentru acea piesă înainte ca spațiul rămas să fie împărțit.

Prin urmare, unitatea fr acționează ca flexbox cu o flex-basis de 0 , cu excepția cazului în care dimensiunea min-content al acelei piese este mai mare, atunci acționează mai mult ca flexbox folosind o flex-basis de auto . La fel ca în exemplul nostru de auto din secțiunea anterioară. Merită să rețineți acest lucru dacă pistele cu lățime egală nu arată foarte egale. Motivul probabil este că există ceva într-una dintre piese care are o dimensiune min-content mai mare decât i-ar fi primit.

Realizarea de piese egale cu minmax

Știm acum de ce unitatea fr ar putea crea piste mai mari decât ne-am dorit. Cu toate acestea, putem controla modul în care se comportă prin introducerea unei alte metode de dimensionare specifice grilei - funcția minmax() . În exemplul de mai sus (cuvântul lung dintr-o pistă forțând o dimensiune min-content ), Grid se comportă ca și cum am folosi următoarea definiție de dimensiune a piesei.

 .grid { display: grid; grid-template-columns: minmax(auto,1fr) minmax(auto,1fr) minmax(auto,1fr); }

Grid se uită la dimensiunea auto care se rezolvă la dimensiunea content și o folosește ca dimensiune de bază pentru melodie înainte de a împărți orice spațiu rămas.

Dacă doriți ca Grid, în exemplul de mai sus, să facă forțat pista din mijloc o cotă egală a lățimii din containerul grilă, chiar dacă acest lucru ar provoca orice depășire, puteți face acest lucru făcând 0 prima valoare în minmax() . După cum puteți vedea în exemplul următor, acest lucru va provoca o depășire.

Puteți vedea de ce specificația este implicită la comportamentul pe care îl are. În general, nu dorim să aibă loc depășiri dacă există spațiu pentru afișarea conținutului, cu toate acestea, aveți capacitatea de a forța problema și de a provoca depășirea dacă este necesar.

Funcția minmax() este, de asemenea, foarte utilă la dimensionarea rândurilor pentru a preveni prăbușirea unui rând până la înălțimea zero atunci când este gol, dar permițându-i totuși să crească la o dimensiune care să permită orice conținut care este adăugat. În exemplul următor, am grid-auto-rows setat la minmax(50px, auto) . Piesele din grila implicită vor avea întotdeauna o înălțime de 50 de pixeli, totuși puteți vedea că al doilea rând este mai înalt din cauza cantității de conținut dintr-o celulă a acelui rând.

Procente în aspectul grilă

Deși avem unitatea fr , dimensionarea bazată pe conținut și unitățile noastre obișnuite de lungime în Aspect grilă, s-ar putea, de asemenea, să doriți să utilizați procente pentru anumite cerințe de dimensionare. În cele mai multe cazuri, unitatea fr va fi o alegere mai bună, totuși, uneori, poate doriți să preluați singur controlul asupra mărimii procentuale exacte. Un motiv pentru a face acest lucru este dacă aliniați elementele așezate folosind Grid într-un design care utilizează și alte metode de aspect care se bazează pe dimensiunea procentuală.

De cele mai multe ori, dimensionarea procentuală va funcționa așa cum vă așteptați. O pistă de grilă dimensionată folosind un procent va calcula procentul din lățimea containerului grilă. De asemenea, puteți utiliza procente pentru proprietățile gap , iar acestea se vor calcula și pe baza lățimii containerului grilei. Exemplul de mai jos are trei coloane de 30% fiecare, plus decalaje ale grilei de 5% între piste.

Locul în care trebuie avută grijă este atunci când folosiți procente pentru marginile verticale și umplutura. Atât în ​​Flexbox, cât și în Grid, o problemă de lungă durată înseamnă că modul în care sunt calculate marginile procentuale verticale și umplutura va diferi între browsere.

Puteți citi mai multe despre această problemă în postarea mea „Cum ar trebui să rezolvăm marjele procentuale și umplutura pe elementele grid și flexibile”, cu toate acestea, sfatul meu și cel al specificației este să evitați utilizarea procentelor pentru marjă și umplutură de sus și de jos pentru timp. fiind, deoarece rezultatele vor fi inconsecvente.

Alinierea și dimensionarea în aspectul grilei

Utilizarea proprietăților de aliniere a casetei din Aspect grilă poate modifica și dimensiunea zonelor din grila. Luați în considerare următorul aspect cu patru piste de coloană de 100 de pixeli, trei piste de rând de 50 de pixeli și spații de 20 de pixeli. Urmele grilei nu ocupă întreaga suprafață a containerului grilă și astfel se aliniază pentru a start pe ambele axe. Elementele care se întind pe mai multe piste devin o dimensiune care este totalul tuturor pistelor și golurilor pe care le acoperă.

Dacă acum folosesc proprietățile Box Alignment align-content și justify-content cu valori ale space-between , pistele se răspândesc pe măsură ce golurile cresc pentru a absorbi spațiul suplimentar. Acum, orice element care se întinde pe mai mult de o pistă a devenit mai mare, deoarece conține spațiul din spațiul acum mărit.

Comparație cu distribuția spațiului în Flexbox și grilă

Motivul pentru care cred că înțelegerea conceptelor precum min-content max-content este atât de importantă atunci când se ocupă de aspect, este că vă permit să începeți să explorați detaliile mai fine ale aspectului. Voi încheia acest articol cu ​​un exemplu bun în acest sens, ceva pe care îl descoperim comparând ceea ce se întâmplă în flexbox și Grid atunci când trebuie să încadrăm articole într-un container.

Exemplul arată un container flexibil cu patru articole flexibile; dedesubt se află un container grilă cu patru elemente grilă. Acest conținut este identic, dar aspectul este ușor diferit, în ciuda faptului că acestea sunt machete aproximativ comparabile. Elementele flexibile au o flex-basis de auto și li se permite să se micșoreze. Definiția grilei definește patru piste, toate cu dimensiunea auto .

În exemplul flexbox, articolele mai scurte s-au prăbușit până la dimensiunea min-content , iar articolului mai mare i s-a acordat mai mult spațiu.

În exemplul Grid, articolele mai mici sunt afișate la dimensiunea max-content , astfel încât articolul mai lung are mai puțin spațiu de afișat. Când am văzut prima dată acest comportament, am fost nedumerit. Motivul diferenței se rezumă la algoritmii care calculează dimensiunea elementelor din metodele de aspect. În Flexbox, articolul începe la dimensiunea max-content ; întrucât flex-shrink este o valoare pozitivă, spațiul începe să fie îndepărtat de la fiecare articol. Odată ce articolele mai mici ajung la dimensiunea min-content , flexbox nu mai ia spațiu pentru a preveni dispariția sau debordarea lor.

Grila, totuși, începe cu elementele la dimensiunea min-content și apoi adaugă spațiu. Articolele noastre ajung rapid la dimensiunea max-content , moment în care grila nu le mai atribuie spațiu, deoarece avem un articol mai mare care poate umple spațiul rămas. Acum că știți despre min-content max-content , veți putea observa când se afișează melodiile sau articolele în acest fel, ceea ce vă va oferi un punct de plecare pentru a explora și a afla ce se întâmplă.

Mărimea contează!

În timp ce elaborarea dimensiunilor procentuale pentru a alinia lucrurile nu a fost niciodată distractiv, a fost cel puțin ceva pe care l-am înțeles cu toții. Ne-a oferit mult control, chiar dacă însemna că trebuia să facem toată munca. Poate fi frustrant atunci când începem să folosiți Flexbox și Grid, doar pentru a descoperi că uneori nu obținem aspectul la care ne așteptam. Poate fi tentant să alergăm imediat înapoi pentru a face munca pentru noi înșine și a folosi procente pentru flex-basis sau dimensiunea pistei.

Totuși, să petreci ceva timp jucându-te cu dimensionarea, până când te simți confortabil cu ceea ce se întâmplă în diverse situații, te va răsplăti în cele din urmă. Veți descoperi că aveți nevoie de mai puține interogări media și vă puteți baza pe flexibilitatea inerentă a metodelor de aspect.

Pentru a vă ajuta să începeți cu propriile explorări, am încercat să păstrez exemplele din acest articol cât mai simple posibil, astfel încât să puteți bifurca și experimenta cu ele. Majoritatea lucrurilor pe care le-am împărtășit în acest articol sunt rezultatul faptului că mă întreb ce se va întâmpla dacă încerc ceva diferit, de exemplu, încerc și înțeleg de ce funcționează așa cum funcționează! Deci, dacă rămâi cu mai multe întrebări decât răspunsuri, postează un comentariu cu un link către o demonstrație și voi încerca să indice partea din specificație care explică.