Il problema con le percentuali nei CSS

Non molto tempo fa, facevamo completamente affidamento sull'utilizzo di percentuali per larghezze e altezze. L'uso delle percentuali significava che il layout e gli elementi potevano assumere un'altezza e una larghezza basate sulla finestra. Ma poiché i CSS moderni continuano ad evolversi, siamo arrivati ​​a un punto in cui potrebbe anche essere una buona idea evitare di usare le percentuali.

Scopri i problemi comuni che incontrerai quando utilizzi le percentuali. Scopri anche le moderne tecniche CSS da utilizzare al posto delle percentuali. Queste tecniche ti daranno lo stesso risultato delle percentuali senza nessuno degli inconvenienti.

Un esempio di griglia molto semplice

Per dimostrare un problema con le unità percentuali, considera questo layout HTML:

<divclasse="contenitoremia-griglia">
 <divclasse="elemento della griglia">
div>
 <divclasse="elemento della griglia">
div>
div>

L'elemento esterno è una base

div elemento contenitore con due div bambini. Ogni bambino ha un elemento della griglia classe. Per trasformare il contenitore in una griglia con due colonne (due riquadri), dovremo applicare il seguente codice CSS:

corpo {
colore di sfondo: nero;
align-elementi: centro;
giustificare il contenuto: avvio flessibile;
}
.mia-griglia {
Schermo: griglia;
colonne-modello-griglia: 50% 50%;
margine: 3rem;
confine: 2pxsolidooro;
imbottitura: 1rem;
}
.grid-elemento {
confine: 3pxsolidooro;
imbottitura: 10rem 0;
sfondo: blu;
}

Quindi ogni colonna (elemento della griglia) ha un colore di sfondo dorato. Sulla classe genitore del contenitore, impostiamo griglia-template-colonna al 50% per ogni colonna. Di conseguenza, entrambe le scatole occupano il 50% della larghezza totale dell'elemento contenitore.

Ecco il risultato:

Ma ci sono problemi con questo allineamento. Innanzitutto, se hai deciso di aggiungere a spacco al genitore della griglia, il bambino potrebbe fuoriuscire dal lato. Ad esempio, se dovessi aggiungere spazio: 3px al .mia-griglia block nel CSS, ecco come apparirebbe il layout:

Come puoi vedere nell'immagine sopra, la casella di destra è stata spostata fuori dal contenitore. A volte potresti non notarlo perché il tuo divario è abbastanza piccolo, causando uno strano problema di allineamento. Ma se avevi un divario maggiore, la sovrapposizione diventa abbastanza ovvia.

Ogni volta che utilizzi percentuali e aggiungi margini o lacune, c'è un'enorme possibilità di riscontrare questo tipo di errori. Ma perché si verifica l'errore?

È perché ogni colonna è il 50% del genitore. Nell'esempio sopra, abbiamo il 50% più il 50% più quel gap (3px), che spinge la scatola fuori dal contenitore.

Si noti che questo errore non si verifica solo con 50-50. È possibile impostare la prima colonna al 75%, la seconda colonna al 25% e l'errore si verificherà comunque. Questo è il motivo per cui è necessario utilizzare più spesso la seguente soluzione.

La soluzione con valori frazionari

La soluzione è utilizzare valori frazionari anziché percentuali. Quindi, invece di impostare la prima colonna al 75% e la seconda al 50%, puoi impostare la prima colonna a 3fr e la seconda colonna a 1fr:

colonne-modello-griglia: 3fr 1fr

Ciò mantiene lo stesso rapporto del primo esempio. Ma il vantaggio di utilizzare fr unità è che stanno usando una frazione dello spazio disponibile. In questo caso, la prima colonna occuperà tre parti dello spazio mentre la seconda colonna ne occuperà una parte, escluso lo spazio vuoto.

Un altro vantaggio dell'utilizzo di frs rispetto alle percentuali o altro unità assolute, come px o em—è che puoi combinarli con valori fissi. Ecco un esempio:

griglia-template-colonne: 1fr 10rem;

Con il codice sopra, otterrai un valore fisso che non cambia mai indipendentemente dalle dimensioni dello schermo. Questo perché la colonna di destra rimarrà sempre a 10rem mentre la colonna di sinistra occuperà lo spazio rimanente (meno il gap).

A volte puoi farla franca usando le percentuali. Ma devi usarli in modi intelligenti che possono ancora adattarsi alla situazione. Spesso, questo significa abbinarli a un fr valore.

Un esempio più realistico

Immaginiamo di avere una pagina che comprende l'area del contenuto principale e un lato (per i post correlati). L'area del contenuto principale occupa tre frazioni dello schermo mentre quella laterale occupa lo spazio rimanente meno il divario:

.contenitore {
larghezza: 100%;
Schermo: griglia;
colonne-modello-griglia: 3fr 1fr;
spacco: 1.5rim;
}
.carta {
colore di sfondo: #5A5A5A;
imbottitura: 10px;
margine inferiore: .5rim;
}

Ecco il risultato:

In genere, sposteresti la barra laterale (o di lato) nella parte inferiore (o superiore) della pagina una volta che lo schermo diventa troppo stretto. Ciò significa impostare query multimediali che impilano tutto uno sopra l'altro quando il viewport raggiunge un determinato punto di interruzione.

Ecco come puoi impilare tutto in una colonna quando il viewport raggiunge 55em o meno:

@media(larghezza massima: 55 em) {
.contenitore {
Schermo: flettere;
direzione flessibile: colonna;
 }
}

E il risultato sarà simile a questo:

Ora non vuoi che ogni scheda si estenda per la larghezza dell'intero viewport. Piuttosto, le carte dovrebbero essere visualizzate una accanto all'altra. Il modo migliore per raggiungere questo obiettivo è con le griglie CSS. Ma invece di impostare valori di larghezza fissi (come il 50%) per la griglia-template-colonna, usa il file ripetere() funzione come segue:

.sidebar-griglia {
Schermo: griglia;
colonne-modello-griglia: ripetere(auto-fit, minimo Massimo(25rem, 1fr));
align-content: inizio;
spacco: 2rem;
}

Questo CSS imposta una dimensione minima di 25rem e una dimensione massima di 1fr. Questo approccio è molto migliore rispetto all'impostazione di larghezze fisse perché si basa sul dimensionamento intrinseco. In altre parole, consente al browser di capire le cose in base ai parametri disponibili.

Ora, quando riduci la finestra del browser a una larghezza specifica, la casella della griglia si riadatta automaticamente a due caselle per riga.

Quando lo schermo diventa più piccolo, scende a una casella per riga. Quindi il browser impila tutto uno sopra l'altro. Tutto questo accade mentre ridimensioni la finestra. Puoi utilizzare una funzione del browser come Chrome DevTools per capire come funziona questo CSSe come il ridimensionamento delle finestre modifica il layout.

La parte migliore è che non hai bisogno di una query del contenitore o di qualcosa di speciale per rendere l'elemento reattivo. Basta impostare una griglia e utilizzare minimo Massimo() per impostare valori frazionari anziché dimensioni fisse.

Ulteriori informazioni sulla griglia CSS

Se vuoi essere bravo con i CSS, devi avere una profonda conoscenza delle griglie CSS. Le griglie possono essere abbastanza potenti se usate bene. Puoi ottenere quasi tutti i layout che desideri utilizzando le griglie. Questo lo rende uno strumento indispensabile nei CSS.

Una cosa da tenere a mente quando si utilizzano le griglie CSS è concentrarsi sulla reattività. È inoltre possibile utilizzare l'approccio frazionario per evitare casi di collisioni tra elementi. Ricorda di padroneggiare le griglie CSS perché lo stile di layout ti aiuterà immensamente durante la creazione di siti web.