Quando usare Flexbox e quando usare Grid? Possono essere usati anche insieme? In questo breve articolo lo scoprirai.
Prima dell’uscita dei Flexbox, la struttura dei layout di pagina era demandata a modi ingegnosi e qualche volta fantasiosi nell’utilizzo del CSS. L’unico mezzo che veniva in aiuto allo sviluppatore web era la proprietà Float. Benchè come detto fosse l’unica alternativa, lasciava enormi interrogativi sul suo impiego, soprattutto nell’ottica dii responsive design.
Col tempo e con l’avvento del CSS3 è stato introdotto il Flexbox che ha risolto non pochi problemi nella strutturazione di pagine web complesse.
Quali sono le principali caratteristiche del Flexbox?
Flexbox è stato sviluppato per semplificare l’allineamento dei contenuti utilizzando layout unidimensionali, sia verticalmente che orizzontalmente. È particolarmente utile per allineare e distribuire elementi contenuti all’interno di un proprio contenitore in modo responsivo. Questo è utile quando vogliamo che la nostra pagina web si adatti alle varie dimensioni di device e browser.
L’utilizzo principale lo si fa gestendo il flexbox tramite delle proprietà da dare al contenitore. Sarà appunto quest’ultimo ad alterare il posizionamento e allineamento al suo interno degli elementi.
Possiamo dire che Flexbox eccelle nel darti il controllo su layout unidimensionali e, come suggerisce il nome, consente agli elementi figlio di ridursi ed espandersi secondo necessità.
E il CSS Grid invece?
CSS Grid ha il vantaggio di poter dichiarare il posizionamento degli elementi all’interno di una griglia e consente di effettuare modifiche sostanziali al layout, anche senza la necessità di fare modifiche alla struttura HTML. Inoltre si tratta di un modello pensato per supportare la realizzazione di layout bidimensionali.
CSS Grid contiene una serie di sottoproprietà. Uno di questi è la nuova CSS Unit: la cosiddetta frazione (fr), che funziona in modo molto simile alla divisione delle dimensioni degli elementi utilizzato in Flexbox.
Una frazione (1fr) è una frazione della riga. Quindi ad esempio se dividiamo una griglia in 3×3, come nell’esempio qui sotto, allora 1fr = ⅓ o 33.3 %.
Da questo esempio possiamo notare anche un’altra cosa importante: Non tutte le box devono essere riempite, possono esserci anche contenuti vuoti:
Qual è la migliore griglia CSS o Flexbox?
Ricapitolando: Grid è più adatto per costruire interi layout di pagina, soprattutto quelli più complessi. Riesce a gestire layout bidimensionali mentre Flexbox solo monodimensionali. Flexbox è più indicato per fare spostamenti/allineamenti interni ad un contenitore, ad esempio se voglio posizionare elementi come immagine, titolo e descrizione all’interno di una card oppure allineare gli elementi all’interno di una barra di navigazione.
Il consiglio è sicuramente quello di impadronirsi comunque di entrambi, in modo da utilizzare l’uno o l’altro a seconda delle necessità che il progetto richiede. Entrambi sono importanti e proprio per il fatto che CSS Grid è uscito più recentemente, sembra quasi andare a colmare (non sostituire) alcuni casi di uso, semplificandone la gestione.