𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
Smetti di lottare con i tuoi layout CSS.
Passavo ore a sistemare layout rotti con Flexbox. Cercavo di avvolgere gli elementi in una riga, ma l'ultimo elemento si allungava su tutto lo schermo. Sembrava sbagliato. Ho provato margini e altri trucchi, ma nulla funzionava.
Poi ho cambiato mentalità e sono passato a CSS Grid.
La differenza è semplice:
- Flexbox è per layout monodimensionali. Usalo per una singola riga o una singola colonna.
- CSS Grid è per layout bidimensionali. Usalo quando hai bisogno di controllare contemporaneamente sia le righe che le colonne.
Pensa a Flexbox come a uno strumento per piccoli compiti. Pensa a Grid come a uno strumento per l'intera struttura della pagina.
La trappola di Flexbox: Quando usi Flexbox per una galleria, gli elementi potrebbero non allinearsi perfettamente su ogni dimensione dello schermo. Spesso ti ritrovi con elementi "orfani" che interrompono il ritmo del tuo design.
La soluzione Grid: Con Grid, puoi creare gallerie responsive con una sola riga di codice.
Usa questo:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Questo dice al browser di inserire il maggior numero possibile di colonne da 250px. Il browser fa i calcoli per te. Niente più supposizioni. Niente più righe interrotte.
L'esempio della Dashboard: Costruire una dashboard con una barra laterale, un contenuto principale e un footer è difficile con Flexbox. Spesso hai bisogno di contenitori annidati e codice disordinato per far sì che il footer occupi l'intera larghezza.
Con Grid, definisci le tracce una volta per tutte:
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
Puoi dire al footer di estendersi dalla prima all'ultima colonna con un solo comando. Il tuo codice diventa pulito e facile da leggere.
Il mio consiglio:
• Usa Flexbox per allineamenti semplici in header o pulsanti. • Usa Grid per i layout principali della pagina e per gallerie complesse. • Smetti di annidare contenitori solo per risolvere un problema di layout. • Usa l'unità fr per distribuire lo spazio facilmente.
Prova oggi stesso. Prendi un vecchio componente che hai costruito con Flexbox. Riscrivilo usando CSS Grid. Vedrai il tuo codice accorciarsi e i tuoi layout diventare più solidi.