Problema cu procentele în CSS

Nu cu mult timp în urmă, ne bazam complet pe utilizarea procentelor pentru lățimi și înălțimi. Utilizarea procentelor a însemnat că aspectul și elementele dvs. ar putea lua o înălțime și lățime pe baza ferestrei de vizualizare. Dar, pe măsură ce CSS-ul modern continuă să evolueze, am ajuns la un punct în care ar putea fi chiar o idee bună să evităm utilizarea procentelor.

Aflați despre problemele frecvente pe care le veți întâmpina atunci când utilizați procente. Aflați, de asemenea, despre tehnicile CSS moderne de utilizat în locul procentelor. Aceste tehnici vă vor oferi același rezultat ca procente, fără niciun dezavantaj.

Un exemplu de grilă foarte simplu

Pentru a demonstra o problemă cu unitățile procentuale, luați în considerare acest aspect HTML:

<divclasă="recipientgrila mea">
 <divclasă="element-grilă">
div>
 <divclasă="element-grilă">
div>
div>

Elementul exterior este un element de bază div element container cu două

div copii. Fiecare copil are o element-grilă clasă. Pentru a transforma containerul într-o grilă cu două coloane (două casete), va trebui să aplicăm următorul cod CSS:

corp {
culoare de fundal: negru;
alinierea elementelor: centru;
justifica-conținut: flex-start;
}
.grila-mea {
afişa: grilă;
grilă-șablon-coloane: 50% 50%;
marginea: 3rem;
frontieră: 2pxsolidaur;
căptușeală: 1rem;
}
.articol-grilă {
frontieră: 3pxsolidaur;
căptușeală: 10rem 0;
fundal: albastru;
}

Deci, fiecare coloană (articol grilă) are o culoare de fundal de aur. Pe clasa părinte container, am stabilit grilă-şablon-coloană la 50% pentru fiecare coloană. Ca rezultat, ambele cutii ocupă 50% din lățimea totală a elementului container.

Iată rezultatul:

Dar există probleme cu această aliniere. În primul rând, dacă ați decis să adăugați un decalaj pentru părintele grilă, copilul s-ar putea revărsa din lateral. De exemplu, dacă ar fi să adăugați decalaj: 3px la .grila-mea bloc în CSS, apoi iată cum ar arăta aspectul:

După cum puteți vedea în imaginea de mai sus, caseta din dreapta s-a mutat din container. Uneori este posibil să nu observați acest lucru, deoarece distanța dvs. este suficient de mică, ceea ce duce la o problemă ciudată de aliniere. Dar dacă ai avut un decalaj mai mare, atunci suprapunerea devine destul de evidentă.

Ori de câte ori utilizați procente și adăugați marje sau lacune, există o șansă mare de a întâmpina astfel de erori. Dar de ce apare eroarea?

Se datorează faptului că fiecare coloană este 50% din părinte. În exemplul de mai sus, avem 50% plus 50% plus acel decalaj (3px), care împinge cutia din container.

Rețineți că această eroare nu se întâmplă numai cu 50-50. Puteți seta prima coloană la 75%, a doua coloană la 25% și eroarea va apărea în continuare. Acesta este motivul pentru care trebuie să utilizați mai des următoarea soluție.

Soluția cu valori fracționale

Soluția este să folosiți valori fracționale în loc de procente. Deci, în loc să setați prima coloană la 75% și a doua la 50%, puteți seta prima coloană la 3fr și a doua coloană la 1fr:

grilă-șablon-coloane: 3fr 1fr

Acesta menține același raport ca primul exemplu. Dar avantajul folosirii fr unități este că folosesc o fracțiune din spațiul disponibil. În acest caz, prima coloană va ocupa trei părți din spațiu, în timp ce a doua coloană va ocupa o parte, fără a include golul.

Un alt avantaj al folosirii frs peste procente — sau altele unități absolute, cum ar fi px sau em— este că le puteți combina cu valori fixe. Iată un exemplu:

grid-template-coloane: 1fr 10rem;

Cu codul de mai sus, veți obține o valoare fixă ​​care nu se schimbă niciodată indiferent de dimensiunea ecranului. Acest lucru se datorează faptului că coloana din dreapta va rămâne întotdeauna la 10rem, în timp ce coloana din stânga va ocupa spațiul rămas (minus decalajul).

Uneori poți scăpa folosind procente. Dar trebuie să le folosești în moduri inteligente care se pot adapta în continuare situației. Adesea, asta înseamnă a le asocia cu un fr valoare.

Un exemplu mai realist

Să ne imaginăm că aveți o pagină care cuprinde zona principală de conținut și o zonă de parte (pentru postări conexe). Zona de conținut principal ocupă trei fracții ale ecranului, în timp ce partea laterală ocupă spațiul rămas minus decalajul:

.container {
lăţime: 100%;
afişa: grilă;
grilă-șablon-coloane: 3fr 1fr;
decalaj: 1.5rem;
}
.card {
culoare de fundal: #5A5A5A;
căptușeală: 10px;
margine-fond: .5rem;
}

Iată rezultatul:

De obicei, ați muta bara laterală (sau deoparte) în partea de jos (sau sus) a paginii odată ce ecranul devine prea îngust. Aceasta înseamnă configurarea interogărilor media care stivuiesc totul unul peste altul atunci când fereastra de vizualizare atinge un anumit punct de întrerupere.

Iată cum puteți stivui totul într-o coloană când fereastra de vizualizare atinge 55 em sau mai puțin:

@mass-media(lățimea maximă: 55em) {
.container {
afişa: contracta;
flex-direcție: coloană;
 }
}

Și rezultatul va arăta cam așa:

Acum nu doriți ca fiecare card să acopere lățimea întregii ferestre de vizualizare. Mai degrabă, cărțile ar trebui să fie afișate una lângă alta. Cel mai bun mod de a realiza acest lucru este cu grile CSS. Dar în loc să setați valori fixe de lățime (cum ar fi 50%) pentru coloana-șablon-grilă, utilizați repeta() functioneaza dupa cum urmeaza:

.sidebar-grid {
afişa: grilă;
grilă-șablon-coloane: repeta(auto-adaptare, minim maxim(25rem, 1fr));
alinierea-conținut: start;
decalaj: 2rem;
}

Acest CSS stabilește o dimensiune minimă de 25 rem și o dimensiune maximă de 1 fr. Această abordare este mult mai bună decât setarea de lățimi fixe, deoarece se bazează pe dimensionarea intrinsecă. Cu alte cuvinte, permite browserului să descopere lucrurile pe baza parametrilor disponibili.

Acum, când reduceți fereastra browserului la o anumită lățime, caseta grilă se reajustează automat la două casete pe linie.

Când ecranul devine mai mic, scade la o casetă pe linie. Deci, browserul stivuiește totul unul peste altul. Toate acestea se întâmplă pe măsură ce redimensionați fereastra. Puteți utiliza o funcție de browser cum ar fi Chrome DevTools pentru a înțelege cum funcționează acest CSSși modul în care redimensionarea ferestrelor modifică aspectul.

Cea mai bună parte este că nu aveți nevoie de o interogare de container sau de ceva fantezist pentru a face elementul receptiv. Pur și simplu setați o grilă și utilizați minim maxim() pentru a seta valori fracționale în loc de dimensiuni fixe.

Aflați mai multe despre grila CSS

Dacă vrei să fii grozav cu CSS, trebuie să ai cunoștințe profunde despre Gridle CSS. Grilele pot fi destul de puternice atunci când sunt folosite bine. Puteți realiza aproape orice aspect doriți folosind Grile. Acest lucru îl face un instrument indispensabil în CSS.

Un lucru de reținut atunci când utilizați grile CSS este să vă concentrați pe receptivitate. De asemenea, puteți utiliza abordarea fracționată pentru a evita cazurile de coliziuni între elemente. Nu uitați să stăpâniți grilele CSS, deoarece stilul de aspect vă va ajuta enorm când creați site-uri web.