Quando si deve creare un layout moderno, la scelta tra CSS Grid e Flexbox è una delle domande più frequenti. Entrambi sono potenti, ma servono scopi diversi. In questo articolo vediamo differenze, esempi pratici e quando usare l’uno o l’altro.
Tabella confronto rapido
| Caratteristica | Flexbox | CSS Grid |
|---|---|---|
| Direzione | 1D (riga o colonna) | 2D (griglia completa) |
| Allineamento | Facile (spazio, centro) | Più complesso |
| Responsive | Buono | Ottimo |
| Esempio ideale | Nav, card orizzontali | Layout pagina completa |
| Browser support | 97%+ | 96%+ |
Cos’è Flexbox
Flexbox è progettato per distribuire spazio lungo un asse (orizzontale o verticale). È perfetto per:
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
Risultato: Menu nav con elementi distribuiti uniformemente.
Cos’è CSS Grid
CSS Grid crea layout bidimensionali (righe + colonne). Controlli posizione esatta di ogni elemento.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 20px;
}
Risultato: Layout 3 colonne con righe definite.
Quando usare Flexbox (4 casi)
1. Navigazione orizzontale
.navbar {
display: flex;
justify-content: space-around;
padding: 1rem;
}
2. Card in fila
css.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
3. Centratura semplice
.centrato {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
4. Sidebar + contenuto
.layout {
display: flex;
min-height: 100vh;
}
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }
Quando usare CSS Grid (4 casi)
1. Layout pagina completa
.page {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
2. Galleria immagini responsive
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
}
3. Dashboard con KPI
dashboard {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, auto);
gap: 20px;
}
4. Hero section complessa
hero {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"testo img"
"testo img"
"cta cta";
}
Esempi pratici da copiare
Flexbox: Nav responsive
<nav class="navbar">
<div class="logo">LOGO</div>
<ul class="menu">
<li>Home</li>
<li>Chi siamo</li>
<li>Contatti</li>
</ul>
</nav>
<style>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #333;
color: white;
}
.menu {
display: flex;
list-style: none;
gap: 2rem;
}
</style>
Grid: Layout blog post
<article class="post">
<header class="post-header">Header</header>
<aside class="post-sidebar">Sidebar</aside>
<main class="post-content">Contenuto</main>
<footer class="post-footer">Footer</footer>
</article>
<style>
.post {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
min-height: 100vh;
gap: 2rem;
padding: 2rem;
}
</style>
Browser support 2026
| Browser | Flexbox | Grid |
|---|---|---|
| Chrome 99% | ✅ dal 2013 | ✅ dal 2017 |
| Firefox 99% | ✅ dal 2012 | ✅ dal 2017 |
| Safari 98% | ✅ dal 2013 | ✅ dal 2017 |
| Edge 99% | ✅ dal 2015 | ✅ dal 2017 |
Sicuri ovunque dal 2020+.
Performance
- Flexbox: Leggermente più veloce per layout semplici
- Grid: Più potente, overhead minimo
- Differenza pratica: Irrilevante per siti normali
Regola pratica: quale scegliere
Nav, pulsanti, card orizzontali → FLEXBOXLayout pagina, gallerie, dashboard → GRIDLayout complessi → GRIDAllineamento semplice → FLEXBOXNon sai quale? → Prova entrambi!
Errori comuni
❌ Flexbox per layout 2D
/* SBAGLIATO: Flexbox per griglia */
.container {
display: flex;
flex-wrap: wrap; /* Complicato */
}
❌ Grid per allineamento 1D
/* SBAGLIATO: Grid per nav semplice */
.nav {
display: grid; /* Troppo complesso */
grid-template-columns: repeat(5, 1fr);
}
Conclusione
Flexbox = allineamento 1D, nav, card semplici.
Grid = layout 2D, pagine complete, gallerie.
Regola d’oro: Se devi controllare solo righe OPPURE solo colonne → Flexbox. Se devi controllare righe E colonne → Grid.
Se vuoi approfondire come creare griglie davvero flessibili, leggi anche l’articolo su CSS Grid responsive con minmax(), auto-fit e auto-fill.