Bento grid: il layout che ha rubato il design a Apple e ora lo vogliono tutti

Sono le dieci e quaranta di un martedì di fine marzo. A Caserta la primavera non bussa, entra direttamente senza chiedere permesso, portandosi dietro quella luce obliqua che taglia il Corso e finisce dritta sulla mia scrivania, mettendo a nudo ogni granello di polvere che ho finto di non vedere. Davanti a me c'è Salvatore. Salvatore non è un "lead", non è un "target persona" e non è un "utente". È un uomo che produce conserve ad Acerra, uno che ha passato trent'anni a capire come far restare il sapore del pomodoro dentro un barattolo di vetro senza farlo diventare una poltiglia industriale. Ha le mani grandi, di quelle che sanno di terra e fatica, e in questo momento tiene il suo smartphone con una delicatezza quasi commovente, come se avesse paura di romperlo.

"Umberto, guarda qui," mi dice. Apre Pinterest. C'è un riflesso sullo schermo, ma riconosco subito quella pulizia chirurgica. È la pagina dei MacBook Pro di Apple. "Non so come si chiama, ma lo voglio così. Vedi queste riquadrature? Questi blocchi che sembrano messi lì con l'ordine di un farmacista ma che ti fanno venire voglia di toccarli? Ecco. Voglio che il mio sito parli così."

Mentre mi parla, sento l'odore della plastica riscaldata del suo vecchio laptop che arranca sulla scrivania, un contrasto stridente con l'estetica futuristica che stiamo guardando. Salvatore ha appena chiesto un bento grid. Non sa il nome, non gli interessa il CSS e non sa nulla di gerarchia visiva, ma ha capito istintivamente una cosa che molti designer dimenticano: l'ordine comunica fiducia.

Il problema è che la maggior parte delle agenzie là fuori — specialmente quelle che vendono siti a pacchetto tra Napoli e Caserta — crede che basti fare dei rettangoli arrotondati per "fare l'effetto Apple". Non hanno capito niente.

Il bento grid che Salvatore ha davanti non è uno stile decorativo. È un sistema di gerarchia visiva brutale e onesto. Se lo tratti come un ornamento, ottieni un mosaico confuso che sembra un catalogo di piastrelle avanzate. Se invece ne capisci la logica, ottieni uno strumento che guida l'occhio del cliente esattamente dove vuoi tu, su qualsiasi schermo, che tu stia vendendo software da diecimila sterline a Shoreditch o barattoli di passata di pomodoro nell'area industriale di Caserta.

In questa guida non ti spiegherò solo come si scrive il codice. Ti racconterò perché questo layout ha rubato il design al mondo intero, e perché — se non lo stai usando correttamente — stai solo aggiungendo rumore in un web che è già troppo rumoroso.

Sono le dieci e quaranta di un martedì di fine marzo. A Caserta la primavera non bussa, entra direttamente senza chiedere permesso, portandosi dietro quella luce obliqua che taglia il Corso e finisce dritta sulla mia scrivania, mettendo a nudo ogni granello di polvere che ho finto di non vedere. Davanti a me c'è Salvatore. Salvatore non è un "lead", non è un "target persona" e non è un "utente". È un uomo che produce conserve ad Acerra, uno che ha passato trent'anni a capire come far restare il sapore del pomodoro dentro un barattolo di vetro senza farlo diventare una poltiglia industriale. Ha le mani grandi, di quelle che sanno di terra e fatica, e in questo momento tiene il suo smartphone con una delicatezza quasi commovente, come se avesse paura di romperlo.

"Umberto, guarda qui," mi dice. Apre Pinterest. C'è un riflesso sullo schermo, ma riconosco subito quella pulizia chirurgica. È la pagina dei MacBook Pro di Apple. "Non so come si chiama, ma lo voglio così. Vedi queste riquadrature? Questi blocchi che sembrano messi lì con l'ordine di un farmacista ma che ti fanno venire voglia di toccarli? Ecco. Voglio che il mio sito parli così."

Mentre mi parla, sento l'odore della plastica riscaldata del suo vecchio laptop che arranca sulla scrivania, un contrasto stridente con l'estetica futuristica che stiamo guardando. Salvatore ha appena chiesto un bento grid. Non sa il nome, non gli interessa il CSS e non sa nulla di gerarchia visiva, ma ha capito istintivamente una cosa che molti designer dimenticano: l'ordine comunica fiducia.

Il problema è che la maggior parte delle agenzie là fuori — specialmente quelle che vendono siti a pacchetto tra Napoli e Caserta — crede che basti fare dei rettangoli arrotondati per "fare l'effetto Apple". Non hanno capito niente.

Il bento grid che Salvatore ha davanti non è uno stile decorativo. È un sistema di gerarchia visiva brutale e onesto. Se lo tratti come un ornamento, ottieni un mosaico confuso che sembra un catalogo di piastrelle avanzate. Se invece ne capisci la logica, ottieni uno strumento che guida l'occhio del cliente esattamente dove vuoi tu, su qualsiasi schermo, che tu stia vendendo software da diecimila sterline a Shoreditch o barattoli di passata di pomodoro nell'area industriale di Caserta.

In questa guida non ti spiegherò solo come si scrive il codice. Ti racconterò perché questo layout ha rubato il design al mondo intero, e perché — se non lo stai usando correttamente — stai solo aggiungendo rumore in un web che è già troppo rumoroso.

Da Osaka a Cupertino: da dove viene il bento grid

Per capire perché Salvatore vuole quella "roba a blocchi", dobbiamo fare un salto indietro e cambiare continente. Non siamo in uno studio di design a Cupertino, siamo a Osaka. O forse a Tokyo, in una stazione ferroviaria affollata all'ora di punta.

Il termine bento (弁当) si riferisce al pranzo al sacco giapponese, conservato in scatole laccate divise in scomparti di dimensioni diverse. Ma non è una scelta casuale o estetica. In un bento box tradizionale, il riso occupa lo scomparto più grande perché è la base nutritiva. Il pesce o la carne occupano uno spazio medio perché sono il protagonista proteico. Le verdure sottaceto e il tamagoyaki stanno nei quadratini più piccoli perché servono da contorno, da accento. La proporzione è strettamente funzionale: lo spazio assegnato riflette l'importanza del contenuto.

Questo principio di compartimentazione gerarchica è rimasto latente nel design digitale per anni. Se scaviamo nella preistoria recente, troviamo tracce significative nel Metro Design Language di Microsoft, presentato con Windows Phone 7 nel 2010: le famose "tiles" di dimensioni diverse con contenuti vivi al loro interno. Microsoft aveva intuito il principio. C'è chi nel settore contesta questa lettura storica e attribuisce ad Apple la paternità esclusiva, ma gli screenshot di Windows Phone 7 restano lì, a testimoniare che il territorio era già stato esplorato. All'epoca, però, il mercato non era pronto. Il design era ancora legato alle icone scheumorfiche e Microsoft fu accusata di essere troppo astratta. La storia, come spesso accade, è scritta dai vincitori.

Il momento di rottura definitivo è arrivato quando Apple ha iniziato a usare questo sistema non solo nelle slide dei suoi keynote, ma nelle pagine prodotto del sito ufficiale. Pensate alla pagina dell'iPhone 17 Pro o dei MacBook Pro: non sono più liste di specifiche tecniche perse in un mare di testo. Sono griglie dove la feature principale occupa una hero card gigante, le specifiche chiave occupano card medie e i dettagli tecnici minori finiscono in card piccole. Apple ha preso un concetto funzionale millenario, lo ha filtrato attraverso il minimalismo digitale e lo ha reso il nuovo standard dell'autorevolezza visiva.

Dalle pagine di Cupertino, il bento grid è esploso come un virus positivo nel mondo dei SaaS americani. Notion ne ha fatto il proprio marchio di fabbrica, Linear lo ha reso lo standard per gli strumenti degli sviluppatori, Vercel lo ha adottato per comunicare velocità e precisione. Oggi è arrivato in Italia. Ma c'è un rischio: se cerchi "bento grid sito web" su Google Italia nel 2026, trovi ancora molti tutorial che parlano solo di estetica. La finestra di opportunità per le PMI italiane è ancora aperta.

L'ho visto applicato magistralmente per la prima volta non su un sito tech americano, ma sulla pagina di un marchio di moda indipendente a Shoreditch, vicino a City Road (EC1V). Camminavo per Londra Est, tra l'odore di caffè bruciato e mattoni bagnati, e guardando quel sito su uno schermo in vetrina ho pensato: "Ecco cosa cercherà Salvatore a Caserta tra dodici mesi." Non mi sbagliavo.

Cos'è tecnicamente un bento grid (e cosa non è)

Dobbiamo essere precisi, altrimenti facciamo confusione e Salvatore finisce per spendere soldi in un sito che sembra un muro di mattonelle scollate.

Se entri in una delle storiche seterie di San Leucio, qui vicino a Caserta, vedrai che il tessitore non usa lo stesso ordito per ogni tipo di seta. Il filo grezzo vuole tensione diversa dal filato lavorato. Il damasco richiede un telaio che il taffettà non userebbe mai. Il bento grid digitale ragiona esattamente così: assegna spazio in base al valore editoriale del contenuto, non a criteri di simmetria decorativa.

Tecnicamente: un bento grid è un layout a griglia in cui le celle — card, tile o blocchi — hanno dimensioni diverse, solitamente basate su un modulo base, e si combinano per formare un rettangolo o quadrato coerente senza spazi vuoti casuali. Per anni abbiamo cercato di simulare queste strutture usando Flexbox o framework come Bootstrap, che ragionano per colonne fisse di uguale larghezza. Il risultato era sempre un compromesso. Il bento grid vive grazie a CSS Grid Layout, arrivato al supporto completo nei browser principali tra il 2017 e il 2019 e oggi lo strumento più potente che abbiamo per costruire layout web complessi.

CSS Grid è il tatami del web design moderno. In una stanza giapponese, il modulo base è il tatami: puoi combinarne due, tre o quattro, ma la struttura rimane fissa. Con CSS Grid definiamo una griglia — ad esempio 4 colonne per 4 righe — e poi diciamo a un elemento di occupare più colonne o più righe contemporaneamente, usando grid-column: span 2 e grid-row: span 2. Questo permette di creare quella danza di volumi che vediamo sui siti di Apple.

Ma per essere un vero bento grid, devono esserci quattro caratteristiche distintive obbligatorie — non negoziabili:

1. Gerarchia dimensionale.

Questa è la regola d'oro. La dimensione della card dichiara l'importanza del contenuto. Se una card occupa quattro unità della griglia, non significa che ho "più testo" da scriverci dentro. Significa: "Ehi, guarda qui, questa è la cosa più importante." È una decisione editoriale travestita da scelta di design.

2. Gap uniforme.

Lo spazio tra le card deve essere identico in ogni punto della griglia, sia in orizzontale che in verticale. Si oscilla tra i 12 e i 24 pixel. Apple usa spesso 20px. Se il gap varia anche di 2 pixel tra una riga e l'altra, il cervello del visitatore smette di percepire ordine e inizia a vedere caos.

3. Border-radius coerente.

Gli angoli arrotondati non sono un vezzo. Servono a "chiudere" visivamente l'informazione e a comunicare che tutti gli elementi appartengono allo stesso sistema. Tutte le card devono avere lo stesso raggio. Se la card grande ha 24px e quella piccola 12px, il sistema si rompe visivamente.

4. Gerarchia interna delle card.

Ogni card è un piccolo universo con struttura interna ripetitiva: elemento visivo in alto, titolo al centro, dettaglio in basso. Questa prevedibilità cognitiva permette all'utente di scansionare dieci card in tre secondi perché sa già dove troverà l'informazione che cerca.

Cosa NON è un bento grid: non è una griglia di foto tutte uguali (quella è una gallery). Non è un layout a colonne di uguale larghezza dove il testo scorre liberamente. E soprattutto, non è un insieme di blocchi senza gerarchia dichiarata. Se tutti i tuoi blocchi sono della stessa dimensione, non stai facendo bento grid: stai costruendo un muro di mattoni. Ed è altrettanto noioso di una pagina di solo testo.

La psicologia del perché funziona

Non è che Salvatore di Acerra sia diventato improvvisamente un esperto di design minimale. È che il suo cervello — come il mio e il tuo — è programmato per risparmiare energia. Il bento grid funziona perché è neuropsicologicamente efficiente. È comunicazione visiva che rispetta i limiti del processore biologico che abbiamo in testa.

Secondo le ricerche del Nielsen Norman Group su F-pattern e scanning web, gli utenti non leggono le pagine web parola per parola: le scansionano seguendo pattern prevedibili, i cosiddetti F-pattern e Z-pattern. In un layout tradizionale a colonna singola, dopo i primi tre paragrafi l'attenzione crolla. Si chiama banner blindness, saturazione da scorrimento. Il bento grid rompe questo meccanismo perché trasforma l'informazione in oggetti discreti: ogni card è un'unità chiusa, separata dalle altre, che il cervello elabora come elemento autonomo.

C'è poi la questione del carico cognitivo. Quando navighi su un sito strutturato male, il tuo cervello deve fare un lavoro extra per capire cos'è importante e cosa no. Il bento grid fa questo lavoro al posto tuo: ti dice "guarda la card grande, lì c'è il succo; poi, se hai tempo, guarda le piccole per i dettagli". Questa riduzione dello sforzo genera una sensazione di piacere inconscio che noi chiamiamo buona esperienza utente.

In psicologia cognitiva esiste un principio, formulato da George Miller negli anni '50, che parla di un limite della memoria di lavoro a breve termine. Miller lo quantificava in circa sette unità di informazione — con tutto il margine sperimentale del caso. Nel web design si cita spesso, con qualche licenza poetica, per spiegare perché i layout troppo densi affaticano chi naviga. La metafora regge: troppe cose della stessa importanza, presentate nello stesso spazio, saturano. Il bento grid risolve il problema alla radice separando fisicamente le unità informative.

Ti racconto un aneddoto da Londra. Il mio amico Bobby gestisce uno studio di copywriting a Shoreditch, zona di Hackney, dove il design è una religione. L'anno scorso ha rinnovato il sito passando da un layout classico a un bento grid strutturato. Non lo ha fatto per moda. Ha misurato — con dati reali, Google Analytics alla mano — un incremento sensibile del tempo medio sulla homepage. Non ho visto i numeri da vicino, e Bobby tende ad arrotondare quando racconta le proprie vittorie davanti a una pinta di ale tiepida in un pub a Southwark, ma il concetto che mi ha trasmesso era preciso: "Umberto, non è che sono diventato più bravo a scrivere. È che finalmente la gente non deve più faticare per trovare quello che faccio. Glielo sto servendo su un vassoio diviso per scomparti. Come se avessi tolto il rumore di fondo da una radio che gracchiava."

Ecco il punto: il bento grid non aggiunge valore, libera il valore che già hai ma che era sepolto sotto una pessima organizzazione visiva.

I brand che lo fanno bene (e uno che lo fa male)

Per capire la differenza tra un capolavoro e un disastro, dobbiamo guardare i casi reali. Non serve inventare nulla, basta aprire il browser.

Apple — il riferimento assoluto

Apri la pagina del MacBook Pro su apple.com. La struttura è ritmica e immutabile: una hero card orizzontale a larghezza piena (la feature che ti deve far sognare), seguita da due card medie affiancate (le specifiche che ti devono convincere), seguite da una fila di card piccole (i dettagli che ti devono rassicurare). Gap: 20px esatti. Border-radius: 20px. Colori neutri con accenti cromatici minimi, così che l'unica cosa che "urla" sia il prodotto stesso. È una lezione di umiltà: il design scompare per far parlare l'oggetto.

Notion — il bento nel software

Notion usa il bento grid per risolvere un problema enorme: come spieghi un prodotto che fa mille cose diverse? Dividendo le funzionalità in card gerarchizzate. La card grande mostra l'editor (il cuore del prodotto), le card medie mostrano i template, le card piccole le integrazioni. Il dettaglio tecnico più interessante di Notion: dentro le card non mettono illustrazioni astratte, ma screenshot del prodotto reale. La prova del funzionamento è incastonata nel bento stesso.

Linear — il bento per i professionisti

Linear è uno strumento di project management per team di sviluppo software. Il loro sito è scuro, con accenti neon, quasi cyberpunk. Usano il bento grid per gestire un'informazione densa senza farla sembrare caotica. L'elemento tecnico chiave è il gap generoso: lasciano respirare le card. È un design che dice, senza scrivere una parola, "siamo professionali, siamo precisi, siamo veloci."

DJI — il bento per il prodotto fisico

La pagina del drone Mini 4 Pro è un altro caso magistrale. Grandi card con video in slow motion del drone in volo, card medie con l'autonomia della batteria, card piccole con i sensori di ostacoli. Qui la gerarchia non è data dai colori ma esclusivamente dalla dimensione. È un layout che comunica potenza tecnologica attraverso la struttura, non attraverso gli effetti.

L'esempio negativo: il mosaico senza gerarchia

Ho visto questo errore troppe volte negli ultimi mesi, nell'area tra Napoli e Caserta. Agenzie che provano a imitare lo stile Apple senza capirne la logica. Creano pagine con quindici card, tutte della stessa dimensione (1×1), tutte con lo stesso bordo e la stessa tipografia. Il risultato è un mosaico piatto che non comunica nulla. L'utente atterra sulla pagina, non sa dove guardare, e se ne va.

Questo non è un bento grid. È una griglia di tile senza gerarchia — e una griglia senza gerarchia non è design, è decorazione. Se non c'è una card più grande delle altre, il visitatore non sa cosa è importante. E se non sa cosa è importante, non sa cosa fare. E se non sa cosa fare, chiude il tab.

Ecco come appare un bento grid applicato a una PMI reale — passa il cursore sulle card o premi "Mostra tipo card" per vedere la funzione di ogni elemento.

Come si costruisce un bento grid: la struttura base

Salvatore mi guarda e mi fa la domanda fatidica: "Ma Umberto, quanto costa rifarlo così? Serve un nuovo sito, un hosting più potente?"

Gli sorrido. "No, Salvatore. Serve qualcuno che sappia strutturarlo correttamente. Il resto è tecnica."

Non è una questione di budget. Un bento grid può essere implementato su WordPress, Webflow, Framer, Joomla con CSS custom, o scritto a mano. Il principio non cambia. Il tool non è il punto.

La griglia base: 4 colonne

Il sistema più versatile per una PMI è una griglia a 4 colonne su desktop. Perché 4? Perché offre la massima flessibilità: card che occupano metà larghezza (2 colonne), card che occupano tre quarti (3 colonne) o card singole. Ecco la logica in CSS Grid:

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; /* Lo spazio sacro. Non si tocca. */
  padding: 20px;
}

/* La card protagonista: 2 colonne × 2 righe */
.card-hero {
  grid-column: span 2;
  grid-row: span 2;
}

/* La card di supporto: 2 colonne × 1 riga */
.card-medium {
  grid-column: span 2;
}

/* La card di dettaglio: 1 colonna × 1 riga */
.card-small {
  grid-column: span 1;
}

/* Tablet: 2 colonne */
@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-hero {
    grid-column: span 2;
  }
}

/* Mobile: 1 colonna */
@media (max-width: 480px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .card-hero,
  .card-medium {
    grid-column: span 1;
  }
}

 ⚠️ Nota tecnica: questo codice illustra la logica di base. L'implementazione reale dipende dal CMS. Per WordPress con Gutenberg esistono blocchi nativi che supportano CSS Grid. Per Joomla si lavora a livello di moduli custom e CSS override. Per Webflow e Framer, la logica è la stessa ma gestita visivamente nell'interfaccia.

I quattro tipi di card e il loro ruolo

Come i quattro movimenti di una sonata: ognuno ha la sua funzione precisa, e se li metti in ordine casuale ottieni rumore, non musica.

I tre parametri che non puoi sbagliare

Gap. Scegli un valore — 16px per layout denso, 20px per standard, 24px per layout aerato — e non cambiarlo mai. In nessun punto della griglia. Se il gap varia, il sistema visivo si spezza.

Border-radius. Stesso valore per ogni card, senza eccezioni. Apple usa 20px. Per brand con identità più calda o artigianale, 24px. Per brand tecnici o formali, 12px. L'importante è la coerenza assoluta.

Aspect ratio. Definisci un modulo base (es. 1:1 per le card piccole) e rispetta le proporzioni matematiche nelle card più grandi. Le altezze non devono essere dettate casualmente dalla quantità di testo: devono essere calcolate.

Bento grid per le PMI: quando usarlo (e quando no)

Tre clienti su cinque che vengono da me con un link di Apple non hanno effettivamente bisogno di un bento grid. Gliene do comunque uno se insistono? Sì, ma prima provo a spiegargli perché potrebbero stare commettendo un errore.

Il bento grid funziona solo se hai una gerarchia naturale nel tuo contenuto. Se forzi il contenuto dentro la griglia invece di costruire la griglia sul contenuto, il risultato è patetico. È come cercare di infilare una pizza tonda in una scatola triangolare: puoi farlo, ma devi tagliare via i pezzi migliori.

Ha senso usarlo quando:

La homepage presenta 3-5 linee di prodotto o servizio distinte — come Salvatore con la sua "Classica", la "Premium" e i "Datterini di collina": una card gigante per la linea di punta, due medie per le altre. Gerarchia immediata.

Una pagina servizi deve comunicare cosa fa il tuo studio — fotografia, consulenza, eventi, formazione: card di dimensioni diverse che dichiarano subito cosa ti fa guadagnare di più e cosa è servizio accessorio.

Un prodotto tecnologico ha funzionalità diverse da mostrare contemporaneamente — dashboard, integrazioni, prove sociali: il bento gestisce la densità informativa senza creare caos.

Non ha senso usarlo quando:

Il contenuto è fortemente sequenziale — articoli di blog, documentazione, guide passo a passo. Il testo lungo ha bisogno di linearità: il bento frammenta l'attenzione, l'esatto contrario di quello che serve per leggere.

Il catalogo contiene centinaia di prodotti omogenei — se vendi ricambi per elettrodomestici, l'utente vuole filtrare per modello, confrontare prezzi e trovare il codice pezzo in tre secondi. Una tabella o una griglia uniforme è più onesta e più utile di qualsiasi bento grid.

Non hai contenuto visivo di qualità — il bento grid chiama le immagini. Card senza foto o grafici puliti sembrano scatole vuote. È un sistema che funziona con la materia visiva, non senza.

La differenza culturale Italia-UK è reale.

Berto, imprenditore metalmeccanico di Santa Maria Capua Vetere, ha voluto il bento grid per il suo sito di componenti industriali. "Umberto, voglio che capiscano che da noi non c'è polvere, c'è precisione." Abbiamo usato un layout clinico, quasi da laboratorio. Sfondo bianco, gap 20px, card con sfumature di grigio. Ha funzionato perché ha dato dignità progettuale a oggetti — giunti, bulloni, componenti — che solitamente vengono trattati male visivamente.

Bobby, a Shoreditch, ha fatto la stessa scelta strutturale per comunicare un messaggio opposto: energia, creatività, movimento. Stesso sistema. Estetica completamente diversa. Background scuro, accenti di colore, micro-animazioni sullo scroll. Uguale nella logica, irriconoscibile nell'aspetto.

È questo il punto che mi piace di più del bento grid: è un sistema neutro. Non ha un'estetica obbligata. Ha una logica obbligata. Puoi vestirlo come vuoi — minimalista o colorato, scuro o chiaro, tipografico o fotografico — ma la gerarchia rimane.

Gli errori più comuni (e come riconoscerli prima che il cliente li veda)

Ho visto abbastanza bento grid sbagliati da costruire un catalogo degli orrori. Di seguito, i cinque errori che si ripetono sistematicamente.

La gerarchia piatta.

Tutte le card 1×1. Non è un bento grid, è una scacchiera. La gerarchia è l'anima del sistema: se manca, il layout perde senso. Ci deve essere un "re" — la card hero — e dei "sudditi" di dimensioni decrescenti.

Il contenuto che soffoca.

Mettere troppo testo dentro una card piccola è suicidio comunicativo. Le card devono respirare. Il testo deve avere aria intorno. Se hai molto da dire, usa una card grande o, più radicalmente, valuta se il bento grid sia il layout giusto per quel contenuto.

Il border-radius inconsistente.

Se vedo una card con l'angolo tondo e quella a fianco con l'angolo spigoloso, capisco immediatamente che il sito è stato costruito "un pezzo alla volta" senza una visione d'insieme. Segnala disattenzione al dettaglio. E l'attenzione al dettaglio è l'unica cosa che separa un lavoro premium da uno ordinario.

Il mobile dimenticato.

Un bento grid che su desktop è un'opera d'arte ma su mobile diventa una lista infinita di card tutte uguali in colonna singola è un fallimento progettuale. Il responsive richiede scelte attive: quali card rimangono visivamente dominanti, quali si accorpano, quali spariscono. Non è automatico: va deciso in fase di progettazione, non aggiustato dopo.

L'assenza di contrasto tra card.

Usare lo stesso identico colore di sfondo per tutte le card le fa sparire in un blocco uniforme. Il bento grid vive di micro-variazioni: lievi ombre, differenze sottili di tono, card scure accanto a card chiare. L'utente deve percepire che sono oggetti distinti, non un unico blocco di marmo squadrato.

Il futuro: Bento 2.0 e le evoluzioni in corso

Mentre scrivo, nel maggio 2026, si parla già di Bento 2.0.

L'estetica statica sta evolvendo. Le prime implementazioni incorporano micro-interazioni sullo scroll — card che si ingrandiscono leggermente quando l'utente le sorpassa, contenuti che cambiano in base al tempo di permanenza. Ma la vera rivoluzione tecnica, quella che cambierà le regole nei prossimi due anni, sono i Container Queries.

Per anni il responsive design ha funzionato così: la card adatta il suo layout in base alla larghezza dello schermo. Con i Container Queries, introdotti nel 2023 e ora supportati da tutti i browser principali, la logica si inverte: la card adatta il suo layout interno in base alla propria dimensione effettiva nella griglia, indipendentemente dalle dimensioni dello schermo. Una hero card in un layout a 4 colonne si comporta diversamente dalla stessa hero card in un layout a 2 colonne — e lo sa da sola, senza che tu debba scrivere media query separate. Per il bento grid questo significa componenti davvero autonomi e riutilizzabili in qualsiasi contesto.

C'è poi l'ombra — o la luce, dipende dai punti di vista — dell'intelligenza artificiale. Strumenti come Figma AI ora propongono bento grid in pochi secondi partendo da un prompt testuale. Il risultato è tecnicamente corretto. Ma c'è un problema, ed è quello sui riflettevo l'altra sera camminando verso Bermondsey: "L'AI mi dà la griglia perfetta, è vero. Ma non sa cosa è importante per il mio cliente. Non sa che Salvatore di Acerra va fiero di quel particolare tipo di pomodoro più che di tutto il resto della fabbrica."

La decisione su cosa mettere nella Hero Cell è una decisione umana. È strategica, editoriale, emotiva. L'AI può darti la scatola. Solo tu sai come comporre il pranzo.

Il futuro del bento grid non è nel codice — che diventerà sempre più semplice — ma nella capacità del designer di ragionare come un editore. Qual è la notizia oggi? Qual è il prodotto che vale la pena mettere in prima pagina? La griglia si adatterà di conseguenza.

Verdetto

Salvatore di Acerra è uscito dal mio studio soddisfatto. Gliel'ho data, quella griglia. Non perché ho copiato Apple: l'ho data perché abbiamo passato tre ore a discutere su quale fosse il prodotto che lo rendeva più orgoglioso. Una volta individuato quello, la griglia si è costruita da sola. Il suo "Datterino Oro" ora occupa il doppio dello spazio di tutto il resto. E i suoi clienti, appena aprono il sito, sanno esattamente dove guardare.

Il bento grid non è una moda passeggera. È il ritorno della gerarchia in un web che era diventato un magma indistinto di template tutti uguali. È lo strumento più democratico che abbiamo: lo puoi applicare con un budget da multinazionale o con la passione di una PMI campana. Il tool non è il punto.

Il bento grid è come il bordo della camicia inamidata di un napoletano che va a un appuntamento importante. Non è lì per bellezza. È lì per dire a chi hai di fronte che hai cura dei dettagli, che rispetti il suo tempo e che sai esattamente cosa è importante.

Se non sai rispondere alla domanda "Cosa conta di più nel mio business?", nessuna griglia ti salverà. Ma se lo sai, il bento grid è l'altoparlante perfetto per farlo sapere al mondo.

Il bento grid è lo strumento più democratico del web design contemporaneo: disponibile a tutti, usato bene da pochi.