Scopriamo le differenze tra Grid e Flexbox e quando invece dovrebbero essere usati insieme
Negli utlimi due anni CSS Flexbox è diventato estremamente popolare tra gli sviluppatori front-end. Questo non ci sorprende particolarmente, poichè ha reso molto più facile creare layout dinamici e allineare i contenuti all’interno dei container.
Vogliamo però parlarvi anche di una “new” entry, CSS Grid, che ha un sacco di funzionalità come Flexbox e che a seconda delle casistiche è anche meglio di Flexbox! No, non in tutte, solo in alcune.
Proprio questa somiglianza sembra destare confusione tra gli sviluppatori e per questo nell’articolo confronteremo i due strumenti, sia a livello micro che a livello macro.
Una dimensione vs. due dimensioni
La regola riassuntiva è:
Flexbox è realizzato per layout monodimensionali, Grid per layout bidimensionali.
Vediamo un’esempio. Se state posizionando degli elementi su uno stesso livello (ad esempio tre pulsanti all’interno di un’header), allora dovreste utilizzare Flexbox:
Flexbox offre maggiore flessibilità rispetto a CSS Grid. Inoltre è molto più semplice da aggiornare e il codice è più snello e semplificato.
Tuttavia, se avete intezione di creare un layout più completo, in due dimensioni, quindi con righe e colonne, dovreste comunque utilizzare CSS Grid:
In questo caso sarà CSS Grid ad essere più flessibile, semplificando il vostro markup e utilizzando del codice pratico da aggiornare e personalizzare.
La domanda a questo punto sorge spontanea, perchè non combinare naturalmente i due strumenti?
Utilizzare Css Grid per il layout della pagina, come nell’esempio riportato qui sopra, e Flexbox per allineare il contenuto all’interno dell’header. Questa commistione vi permetterà di sfruttare il meglio dei due metodi.
Ma vediamo come fare.
Prima il contenuto e poi il layout
Un’altra differenza fondamentale tra i due è che Flexbox si basa sul contenuto, mentre Grid si basa sul layout. Suona poco chiaro e di difficile interpretazione, soprattutto se, anni or sono, creavate siti web partendo dalle tabelle. Cerchiamo quindi di vedere un esempio specifico, così da rendervi questa affermazione più comprensibile (e digeribile).
Riprendiamo l’esempio del paragrafo precedente. Ecco l’HTML:<header>
<div>Home</div>
<div>Search</div>
<div>Logout</div>
</header>
Prima di Flexbox, avremmo visualizzato questi div impilati uno sopra l’altro, proprio in questo modo:
L’header con Flexbox
Una volta che però avremo utilizzato un display: flex, gli elementi saranno posti bene, tutti su una linea.header {
display: flex;
}
Per spostare il pulsante di LOGOUT all’estrema destra, ci occuperemo specificatamente di quell’elemento dandogli un margine:header > div:nth-child(3) {
margin-left: auto;
}
A questo punto avremo la seguente visualizzazione:
Quello a cui dovete fare attenzione è che lasciamo che siano gli stessi elementi a decidere come collocarsi. Inizialmente non abbiamo dovuto definire nient’altro se non display: flex. Questa è ciò che differenzia profondamente Flexbox da Grid, e sarà sicuramente più evidente quando ricreeremo questa esempio utilizzando CSS Grid.
Anche se CSS Grid non nasce per sviluppare strutture unidimensionali, lo utilizzeremo ugualmente per il nostro esempio, così da comprendere le differenze fondamentali tra Flexbox e Grid.
L’header con Grid
Possiamo creare il nostro header in diversi modi utilizzando CSS Grid. Seguiremo un modo piuttosto diretto, in cui la nostra griglia sarà composta da dieci colonne uguali, ognuna larga una frazione di unità.header {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
La visualizzazione a questo punto sarà identica a quello dell’esempio in cui abbiamo utilizzato Flexbox.
Utilizzamo una lente d’ingradimento per vedere esattamente cosa c’è di diverso. Useremo la funzioanlità ‘Ispeziona‘ di Chrome per analizzare le colonne che costituiscono la riga:
La differenza principale con questo approccio è che abbiamo dovuto definire prima le colonne, ovvero paritre dal layout. Abbiamo iniziato definendo la larghezza delle colonne e poi abbiamo inserito il contenuto nelle celle disponibili della griglia.
Con questo approccio siamo stati costretti a decidere prima con quante colonne volevamo suddividere il nostro header.
A meno che non decidiamo di cambiare la griglia, siamo costretti ad utilizzare sempre le dieci colonne che abbiamo stabilito nella fase iniziale. Una limitazione di cui non ci si deve preoccupare lavorando con Flexbox.
In questo caso, per spostare la voce di LOGOUT del menù all’estrema destra, collocheremo la voce direttamete nella decima colonna, in questo modo:header > div:nth-child(3) {
grid-column: 10;
}
Ecco cosa visualizzeremo utilizzando la funzionalità Ispeziona di Chrome:
Non potevamo semplicemente dargli un margine sinistra: auto; perché il pulsante di logout era già stato posizionato in una cella specifica del layout, ovvero nella terza colonna. Per spostarlo, abbiamo dovuto posizionarlo in un’altra cella (libera) della griglia.
Combinare i due metodi
Vediamo ora come utilizzare entrambi i metodi, unendo l’header che abbiamo visto con il layout del sito web. Partiremo costruendo il layout del sito web.
Ecco il codice della struttura:<div class="container">
<header>HEADER</header>
<aside>MENU</aside>
<main>CONTENT</main>
<footer>FOOTER</footer>
</div>
…e quello del CSS:.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
}
Posizioneremo nel grid di partenza gli elementi in questo modo:header {
grid-column: span 12;
}
aside {
grid-column: span 2;
}
main {
grid-column: span 10;
}
footer {
grid-column: span 12;
}
Ora aggiungeremo semplicemente l’header. Trasformeremo l’header, che è comunque un elemento del nostro Grid CSS, in un contenitore Flexbox.header {
display: flex;
}
OK! Ora sposteremo la voce di LOGOUT a destra.header > div:nth-child(3) {
margin-left: auto;
}
In questo modo, il nostro risultato sarà un layout ben strutturato che sfrutta al meglio sia Grid che Flexbox. Ecco come si visualizzano i due contenitori:
A questo punto dovreste aver capito chiaramente le differenze sia generali che specifiche tra Flexbox e Grid, e sapere invece come usarli insieme.
N.B.: Da notare che Grid CSS utilizza come unità di misura fr, attraverso la quale è possibile rappresentare una frazione dello spazio lasciato libero nel contenitore principale; fr consente in pratica di distribuire i componenti figli a seconda dello spazio disponibile nel Grid Container.
Flexbox VS CSS Grid: confronto pratico
Ricapitolando sinteticamente:
- Il Grid Css può fare cose che Flexbox non può fare.
- Flexbox può fare cose che il Grid Css non può fare.
- Flexbox nasce per disporre elementi in un contesto monodimensionale, su righe O colonne.
- Grid CSS opera invece in senso bidimensionale, su righe E colonne.
- Flexbox e Grid Css possono lavorare insieme: un elemento gestito tramite CSS Grid può essere un container Flexbox e un elemento Flex può essere un container Grid.
Riteniamo che sia attualmente sensato considerare CSS Grid e Flexbox due strumenti complementari con significative differenze alla base dei due modelli. Utilizzate quindi l’uno o l’altro a seconda delle componenti di progetto che state sviluppando.
Con CSS Grid si definisce il layout generale della pagina web mentre con Flexbox è possibile delineare come gli elementi si devono comportare all’interno di ogni area.
A seguire un esempio pratico creato su CodePen.
Fonte: https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf
