CSS Grid Vs. Flexbox

Disponibile sotto forma di soluzione unprefixed soltanto da poco tempo, il layout model CSS Grid è stato considerato sin da subito un’alternativa più completa al modello basato sul Flexible Box Layout). Ma le sue caratteristiche sono sufficienti a renderlo un preferibile rispetto a Flexbox?

CSS Grid ha dalla sua parte il vantaggio di rendere esplicitabile il posizionamento degli elementi all’interno di una griglia (grid-template-areas) e consente di effettuare modifiche sostanziali a carico della struttura di un layout, senza per questo richiedere cambiamenti rilevati a livello di markup HTML. In secondo luogo si tratta di un modello pensato per supportare la realizzazione di layout bidimensionali (grid-template-rows e grid-template-columns), mentre Flexbox è maggiormente orientato ad un singolo asse.

Detto questo, considerare CSS Grid e Flexbox due strumenti complementari potrebbe rappresentare l’approccio più appropriato. Il primo supporta infatti funzionalità non previste nel secondo, e viceversa, contestualmente un elemento gestito tramite CSS Grid può essere un container Flexbox e un elemento Flex può essere un container Grid.

Quanto detto non toglie naturalmente nulla alla capacità innovativa di CSS Grid che potrebbe essere considerato una soluzione preferibile in termini di prestazioni nella costruzione di interi layout di pagina; nello stesso tempo si tratta di un modello che richiede un minor ricorso alle media query e minori interventi a loro carico. Rimane però la differenza alla base dei due modelli, perché se Flexbox nasce per disporre elementi in un contesto monodimensionale, su righe o colonne, Grid CSS opera invece in senso bidimensionale, su righe e colonne.

Quindi Flexbox potrebbe essere scelto, per esempio, per la creazione di componenti di navigazione orizzontali che si sviluppano in una singola direzione, andrebbe poi ricordato che CSS Grid è stato concepito per allineare container e non il contenuto all’interno di essi.

Ricapitolando:

• CSS Grid è più adatto per definire interi layout di pagina;
• CSS Grid è più indicato per layout bidimensionali, Flexbox per quelli monodimensionali;
• Flexbox è maggiormente indicato per l’allineamento dei contenuti negli elementi;
• Flexbox risulta preferibile per la definizione di piccoli dettagli di design.

In linea di massima è quindi consigliabile impadronirsi di entrambi i modelli, in modo da utilizzare l’uno o l’altro a seconda delle componenti di progetto che si stanno sviluppando.

Per approfondire