Panoramica

Flexbox e CSS Grid sono i due sistemi di layout moderni del web. Flexbox eccelle nella distribuzione e nell’allineamento lungo una sola dimensione (riga o colonna), mentre Grid è progettato per layout bidimensionali con righe e colonne. In questa guida capirai quando scegliere l’uno o l’altra, con esempi pratici e pattern riutilizzabili.

Quando usare Flexbox o Grid

Usa Flexbox quando devi:

• Allineare elementi in una dimensione (es. navbar, toolbar, chip)
• Distribuire spazio con gap, justify-content, align-items
• Gestire il wrapping orizzontale di card con larghezze flessibili

Usa Grid quando ti serve:

• Un layout bidimensionale con righe e colonne esplicite
• Allineare aree con grid-template-areas o creare griglie responsive con minmax() e auto-fit
• Controllo preciso su spaziature e allineamenti sia orizzontali che verticali

.cards { display:flex; flex-wrap:wrap; gap:1rem; }
.card { flex:1 1 260px; /* crescita, riduzione, base */ }

.gallery { display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

Pattern comuni

• Navbar/Toolbar: Flexbox per allineare logo, menu e CTA; usa gap e justify-content: space-between.
• Card grid: Grid per griglie responsive regolari; Flexbox per liste con larghezze fluide non allineate a colonne fisse.
• Media object (immagine + testo): Flexbox con align-items e gestione del wrapping.
• Layout di pagina: Grid per header, sidebar, main, footer con grid-template-areas.
• Allineamenti verticali complessi: Grid con align-content/justify-content a livello di griglia.

/* Layout base di pagina con Grid */
.page { display:grid; min-height:100dvh; gap:1rem;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
header{ grid-area:header } .sidebar{ grid-area:sidebar }
main{ grid-area:main } footer{ grid-area:footer }

/* Media object con Flexbox */
.media { display:flex; gap:1rem; align-items:flex-start }
.media img { width:120px; flex:0 0 auto; }
.media .content { flex:1 1 auto }

Performance e accessibilità

Entrambi i moduli sono performanti nei browser moderni. Evita annidamenti profondi, preferisci gap agli spaziatori e mantieni l’ordine logico del DOM: usare order (Flexbox) o posizionamenti complessi (Grid) che alterano il flusso può disorientare chi usa tecnologie assistive.

• Responsive: combina Grid/Flex con container queries o media queries.
• Compatibilità: fallback semplici (es. una colonna) se servono browser datati.
• Mantenibilità: usa variabili CSS, classi utilitarie e limita le eccezioni per componente.

Checklist rapida

• Il layout è mono‑dimensionale? Usa Flexbox; altrimenti valuta Grid.
• Serve una griglia regolare e allineata? Grid con repeat() + minmax().
• Allineamenti e distribuzione su una riga/colonna? Flexbox con gap.
• Ordine DOM coerente con la lettura, evita riordinamenti artificiali.
• Testa i breakpoints e l’adattamento dei contenuti reali.

FAQ