Bento Grid Layout con CSS Grid: La Tendenza Design del 2026
Cos’è il Bento Grid e Perché è Ovunque
Se hai aperto un sito di una startup tech, un portfolio da designer, o anche la pagina marketing di Apple negli ultimi mesi, probabilmente l’hai già visto: un insieme di card di dimensioni diverse, disposte in una griglia asimmetrica ma perfettamente ordinata. Si chiama Bento Grid, prende il nome dall’iconico contenitore giapponese per il pranzo — quelle scatole divise in scomparti di forme diverse, ognuno con il suo contenuto.
Il Bento Grid è diventato il layout di riferimento per landing page moderne, dashboard, portfolio e sezioni feature. Il motivo è semplice: comunica tanta informazione in poco spazio, ha un aspetto immediatamente premium, e si costruisce interamente con CSS Grid nativo — zero librerie, zero JavaScript.
In questa guida costruiamo un Bento Grid completo da zero, con snippet pronti da copiare, versione responsive e hover effects. Se non hai ancora dimestichezza con CSS Grid, ti consiglio di leggere prima la guida su Flexbox vs Grid per capire quando usare l’uno o l’altro.
La Struttura HTML: Semplice per Design
La struttura HTML di un Bento Grid è volutamente minimale. Un contenitore .bento con dentro una serie di .card. È il CSS a fare tutto il lavoro — ogni card riceve dimensioni diverse tramite grid-column e grid-row.
<div class="bento">
<div class="card card--hero">
<h2>Titolo principale</h2>
<p>Card grande, occupa più colonne e righe.</p>
</div>
<div class="card card--wide">Larghezza doppia</div>
<div class="card card--tall">Altezza doppia</div>
<div class="card">Card standard</div>
<div class="card">Card standard</div>
<div class="card card--full">Riga intera</div>
</div>
CSS Grid: i Comandi Chiave per il Layout Bento
Il Bento Grid si basa su tre proprietà CSS Grid che è importante capire bene prima di iniziare a costruire:
grid-template-columns— definisce il numero di colonne e la loro larghezza. Conrepeat(4, 1fr)crei 4 colonne uguali che dividono lo spazio disponibilegrid-column: span N— indica che una card occupa N colonne.span 2= larghezza doppia,span 4= riga interagrid-row: span N— comegrid-columnma per le righe. Combinato congrid-columncrea la card “grande” iconica del Bento
Il vantaggio rispetto a soluzioni con Flexbox o floats è che la griglia è a due dimensioni: puoi controllare contemporaneamente righe e colonne, e il browser posiziona le card senza gap o overflow.
Bento Grid Completo: il CSS da Copiare
Ecco il layout base con 4 colonne, gap uniforme e card di dimensioni diverse. Il container usa auto-rows per definire l’altezza minima di ogni riga — le card con span 2 la raddoppiano automaticamente.
/* Container principale */
.bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 16px;
padding: 24px;
max-width: 1200px;
margin: 0 auto;
}
/* Card base */
.card {
background: #1a1a2e;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 28px;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
position: relative;
}
/* Varianti dimensione */
.card--hero { grid-column: span 2; grid-row: span 2; }
.card--wide { grid-column: span 2; }
.card--tall { grid-row: span 2; }
.card--full { grid-column: span 4; }
Con questo CSS, l’HTML di prima produce già un layout Bento funzionante. La card --hero occupa 2×2 = 4 celle, --wide occupa 2 colonne su 1 riga, --tall occupa 1 colonna su 2 righe.
Aggiungere Stile: Colori, Gradiente e Contenuto
Il layout è pronto. Adesso gli diamo carattere. Il Bento Grid tipicamente usa:
- Sfondo scuro con card leggermente più chiare, oppure sfondo chiaro con card bianche con ombra
- Accent colors specifici per category o feature — ogni card ha il suo colore
- Immagini, icone o illustrazioni posizionate in overflow nella parte alta della card
- Titolo breve in basso a sinistra, stile minimalista
/* Card colorata con gradiente */
.card--accent-purple {
background: linear-gradient(135deg, #1a0a2e 0%, #4c1d95 100%);
border-color: rgba(139, 92, 246, 0.3);
}
.card--accent-cyan {
background: linear-gradient(135deg, #001525 0%, #0e4d6b 100%);
border-color: rgba(6, 182, 212, 0.3);
}
/* Testo nella card */
.card__label {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 8px;
}
.card__title {
font-size: 1.4rem;
font-weight: 700;
color: #fff;
line-height: 1.2;
margin: 0;
}
/* Decorazione: cerchio in overflow nella card hero */
.card--hero::before {
content: "";
position: absolute;
top: -60px;
right: -60px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
pointer-events: none;
}
Rendere il Bento Grid Responsive
Un Bento Grid a 4 colonne su mobile è illeggibile. La strategia migliore è ridurre le colonne progressivamente e semplificare le dimensioni delle card sui breakpoint più piccoli. Le media queries fanno il grosso del lavoro.
/* Tablet: 2 colonne */
@media (max-width: 900px) {
.bento {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 180px;
}
/* La card full si adatta alle 2 colonne disponibili */
.card--full { grid-column: span 2; }
/* La hero resta 2x2 */
.card--hero { grid-column: span 2; grid-row: span 2; }
}
/* Mobile: colonna singola */
@media (max-width: 540px) {
.bento {
grid-template-columns: 1fr;
grid-auto-rows: 160px;
gap: 12px;
padding: 16px;
}
/* Tutte le card diventano full-width su mobile */
.card--hero,
.card--wide,
.card--tall,
.card--full {
grid-column: span 1;
grid-row: span 1;
}
/* La hero resta un po' più alta */
.card--hero { grid-row: span 2; }
}
Per un approccio ancora più moderno, puoi usare CSS Container Queries invece delle media queries — in questo modo il Bento si adatta al suo container, non alla viewport, e diventa riusabile ovunque nel layout.
Hover Effects sulle Card
Gli hover effects fanno la differenza tra un Bento Grid statico e uno che sembra vivo. Due pattern che funzionano sempre: il lift (la card si solleva con box-shadow) e lo shimmer (un bagliore scorre sulla card al passaggio del mouse).
/* Transizione base su tutte le card */
.card {
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
will-change: transform;
}
/* Lift effect */
.card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
border-color: rgba(255, 255, 255, 0.18);
}
/* Shimmer: luce che scorre sulla card */
.card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 40%,
rgba(255, 255, 255, 0.04) 50%,
transparent 60%
);
background-size: 200% 100%;
background-position: 200% 0;
transition: background-position 0.6s ease;
border-radius: inherit;
pointer-events: none;
}
.card:hover::after {
background-position: -200% 0;
}
Per effetti più elaborati — come il tilt 3D che segue il mouse — serve JavaScript, ma lo shimmer e il lift si fanno con CSS puro e si integrano bene con le transizioni CSS fluide.
Variante Light Mode
Il Bento Grid funziona benissimo anche in light mode. Lo schema cambia: sfondo grigio chiaro neutro (#f5f5f7, lo stesso usato da Apple), card bianche, ombre leggere invece di bordi.
/* Bento light mode */
.bento--light {
background: #f5f5f7;
padding: 24px;
border-radius: 24px;
}
.bento--light .card {
background: #ffffff;
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
color: #1d1d1f;
}
.bento--light .card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
transform: translateY(-3px);
}
.bento--light .card__title {
color: #1d1d1f;
}
.bento--light .card__label {
color: rgba(0, 0, 0, 0.45);
}
Pattern Comuni e Ispirazione
Il Bento Grid si presta a moltissimi use case. I pattern più usati nel 2026:
- Feature grid — landing page di SaaS e app. La card hero mostra il prodotto in uso (screenshot o demo), le card più piccole elencano le feature con icona + testo breve
- Portfolio grid — i lavori del designer/developer. La card grande mostra il progetto principale, le piccole mostrano dettagli, tecnologie usate, risultati
- Dashboard di metriche — ogni card è un KPI. La card hero mostra il grafico principale, le card piccole mostrano numeri e delta rispetto al periodo precedente
- About/team page — la card grande con la foto del founder, card piccole con valori, missione, tecnologie usate in azienda
💡 Pro tip: per trovare ispirazione su Bento Grid, cerca “bento grid” su Dribbble, Behance o Pinterest. Il volume di reference visivi è enorme — puoi capire in 10 minuti quali pattern funzionano per il tuo use case prima di iniziare a codare.
Bento Grid con Tailwind CSS
Se il tuo progetto usa Tailwind, il Bento Grid si costruisce con le utility classes native senza scrivere CSS custom. Tailwind v3+ ha grid-cols-*, col-span-* e row-span-* che mappano direttamente sui concetti che abbiamo visto.
<div class="grid grid-cols-4 grid-rows-3 gap-4 p-6">
<!-- Card hero: 2 colonne x 2 righe -->
<div class="col-span-2 row-span-2 bg-slate-800 rounded-2xl p-7 flex flex-col justify-end">
<span class="text-xs text-slate-400 uppercase tracking-widest mb-2">Feature</span>
<h2 class="text-2xl font-bold text-white">Titolo principale</h2>
</div>
<!-- Card wide: 2 colonne -->
<div class="col-span-2 bg-slate-800 rounded-2xl p-6">Card larghezza doppia</div>
<!-- Card tall: 2 righe -->
<div class="row-span-2 bg-slate-800 rounded-2xl p-6">Card altezza doppia</div>
<!-- Card standard -->
<div class="bg-slate-800 rounded-2xl p-6">Card normale</div>
<!-- Card full: 4 colonne -->
<div class="col-span-4 bg-slate-800 rounded-2xl p-6">Riga intera</div>
</div>
Per il responsive in Tailwind basta usare i prefissi: md:col-span-2 applica il col-span-2 solo da tablet in su, su mobile la card torna alla dimensione di default (1 colonna).
FAQ e Domande Frequenti
Quante colonne deve avere un Bento Grid?
Non esiste un numero fisso, ma 4 colonne è lo standard più usato perché permette di avere card 1, 2 e 4 colonne (metà e intera riga) senza spazi vuoti. Layouts a 3 o 6 colonne funzionano bene per specifici pattern, ma richiedono più attenzione nella distribuzione delle card per evitare gap indesiderati.
Come gestire il contenuto di lunghezza variabile?
Il problema classico del Bento Grid è che card con contenuto lungo rompono l’altezza fissa delle righe. La soluzione: usa grid-auto-rows: minmax(180px, auto) invece di un valore fisso. Le righe avranno un’altezza minima ma si espandono se il contenuto lo richiede. In alternativa, gestisci il contenuto con overflow: hidden e text-overflow: ellipsis per mantenerlo dentro la card.
Il Bento Grid è accessibile?
CSS Grid è tecnicamente accessibile: l’ordine visivo può differire dall’ordine DOM tramite order o grid-area, ma gli screen reader seguono l’ordine del DOM. Assicurati che l’ordine HTML sia logico (titoli prima dei dettagli, elementi importanti in cima), indipendentemente da come li posizioni visivamente con la griglia.
Serve JavaScript per un Bento Grid?
Per il layout base e gli hover effects: no, CSS puro è sufficiente. JavaScript serve solo per effetti avanzati come il tilt 3D dinamico che segue il cursore, animazioni di entrata basate su scroll (Intersection Observer), o layout che cambiano struttura in base ai dati (es. dashboard con numero di card variabile).
Conclusione
Il Bento Grid è uno di quei pattern che valgono il tempo di imparare: funziona per landing page, portfolio, dashboard e sezioni feature, si implementa con CSS nativo, scala bene su tutti i dispositivi, e ha un aspetto immediatamente moderno che gli utenti riconoscono come “premium”.
Gli snippet in questa guida sono pronti da copiare e adattare. Il passo successivo è personalizzare i colori e il contenuto delle card al tuo progetto — il layout fa già il 70% del lavoro visivo da solo.
Se vuoi approfondire le possibilità di CSS Grid oltre il Bento, la guida CSS avanzato 2026 copre pattern di layout più complessi, custom properties e animazioni integrate.
Suggerimenti e Risorse
🔨 Tool utile: CSS Grid Generator (cssgrid.io) permette di costruire visualmente la griglia e copiare il CSS generato. Utile per prototipare rapidamente la struttura prima di scrivere codice a mano.
🎯 Performance tip: aggiungi
will-change: transformsolo sulle card che hanno effetti hover attivi, non su tutte. Promuovere troppi elementi al layer GPU aumenta il consumo di memoria senza benefici visibili.
💡 Prossimo step: combina il Bento Grid con
@starting-style(in arrivo nativo su tutti i browser 2026) per animazioni di entrata smooth quando le card vengono aggiunte al DOM — senza JavaScript e senza librerie di animazione.
