CSS Grid vs Flexbox: le differenze e quando usare quale

CSS Grid e Flexbox sono due metodi di layout in CSS che permettono di costruire design complessi e flessibili per il web. In parte si sovrappongono, ma ognuno ha caratteristiche proprie e casi d’uso ideali diversi. In questo confronto CSS Grid vs Flexbox vediamo i punti di forza e i limiti di ciascuno, e quando conviene usare l’uno piuttosto che l’altro.

Display Grid

Display Grid è un sistema di layout pensato per i design a griglia. Ti permette di definire righe e colonne sulla pagina e di collocare gli elementi dentro quelle righe e colonne. Vuol dire che puoi allineare senza fatica e organizzare gli elementi della pagina in modo coerente e strutturato.

Ecco un esempio di codice HTML/CSS che usa CSS Grid per creare una griglia di 3 colonne e 3 righe:

Codice HTML Grid

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

Codice CSS Grid

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1rem;
    border: 1px dashed #000;
    padding: 5px;
}

.grid-item {
    background: #e74c3c;
    padding: .5rem;
    color: white;
    text-align: center;
}

Display Flex

Codice HTML Flex

<div class="flex-container">
  <div class="flex-item">Logo</div>
  <div class="flex-item">Menu</div>
  <div class="flex-item">Champ de Recherche</div>
</div>

Codice CSS Flex

.flex-container {
  display: flex;
  justify-content: center;
  gap: 1rem;
  border: 1px dashed #000;
  padding: 5px;
}

.flex-item {
    border: 1px dashed #e74c3c;
    padding: 10px;
}

Flexbox e Grid a confronto

CSS Grid vs Flexbox: lo stesso markup, questa volta con Grid. La differenza sulla dimensione relativa degli elementi si vede subito.

Codice HTML Grid vs Flex

<div class="grid-container">
  <div class="grid-item">Logo</div>
  <div class="grid-item">Menu</div>
  <div class="grid-item">Champ de Recherche</div>
</div>

CSS Grid o Flexbox: quando usare l’uno o l’altro?

Capire i punti di forza e i limiti di ciascuno strumento è quello che ti permette di scegliere il più adatto al tuo progetto. In generale, CSS Grid è ideale per i design a griglia, come i portfolio e le gallerie di immagini, mentre Flexbox è ideale per i design flessibili e responsive, come i menu flex e le barre degli strumenti.

Ecco un esempio per chiarire. Immagina di dover costruire il layout della home page di un sito e-commerce. Quel layout deve contenere le immagini dei prodotti in evidenza, le sezioni delle categorie di prodotto, una barra di navigazione e un form di ricerca. In questo caso, potresti usare CSS Grid per disporre in griglia le immagini dei prodotti in evidenza, e Flexbox per allineare in modo efficace le sezioni delle categorie, la barra di navigazione e il form di ricerca.

i due strumenti si possono anche usare insieme per costruire design ancora più avanzati. Potresti usare CSS Grid per creare una griglia di righe e colonne, poi Flexbox per allineare gli elementi dentro ogni cella di quella griglia. Così combini i vantaggi di entrambi in design più potenti e più flessibili.

In sintesi, CSS Grid è lo strumento giusto per i design a griglia, come i portfolio e le gallerie di immagini, mentre Flexbox è lo strumento giusto per i design flessibili e responsive, come i menu flexbox e le barre degli strumenti. Usandoli insieme puoi costruire design ancora più avanzati, su misura per quello che chiede il tuo progetto.