{"id":31508,"date":"2025-01-21T11:00:00","date_gmt":"2025-01-21T10:00:00","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=31508"},"modified":"2025-01-21T12:35:48","modified_gmt":"2025-01-21T11:35:48","slug":"creiamo-bento-box-design-layout-usando-modern-css","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/it\/frontend-it\/creiamo-bento-box-design-layout-usando-modern-css\/","title":{"rendered":"Creiamo bento box design layout usando modern CSS"},"content":{"rendered":"\n

Un Bento box (\ud83c\udf71) \u00e8 il famoso porta pranzo giapponese che mantiene separati in modo ordinate le diverse pientanze preparate. Portare a scuola un bento pronto \u00e8 un gesto d’affetto nei confronti di chi lo riceve e la cura con cui i diversi piatti vengono organizzati e mostrati, oltre alla qualit\u00e0 del cibo naturalmente, rappresentano quanto quella persona ti sta a cuore. <\/p>\n\n\n\n

Da questa usanza e dal design minimalista, equilibrato e funzionale di questo peculiare oggetto \u00e8 nato un trend nel UX<\/a>\/UI chiamato proprio Bento Layout (o Bento Box Layout) che sar\u00e0 l’oggetto di questo tutorial: non riso, carotine o wurstel a forma di polipo ma moderno HTML e CSS <\/a>saranno i nostri ingredienti, ma la cura e quindi l’affetto con cui sono combinati \u00e8 la stessa!<\/p>\n\n\n\n

La base<\/h2>\n\n\n\n

Per il nostro esperimento vogliamo partire da una base piuttosto semplice ma estremamente comune: abbiamo un main<\/code> che contiene diversi elementi section<\/code> con al loro interno article<\/code> ognuno con un suo header<\/code> ed una immagine all’interno di un elemento semantico figure<\/code>:<\/p>\n\n\n

<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n  <head<\/span>><\/span>\n    <link<\/span> rel<\/span>=\"stylesheet\"<\/span> type<\/span>=\"text\/css\"<\/span> href<\/span>=\"style.css\"<\/span>><\/span>\n    <meta<\/span> charset<\/span>=\"utf-8\"<\/span> \/><\/span>\n    <title<\/span>><\/span>\ud83c\udf71 Bento Box Design Layout with Modern CSS<\/title<\/span>><\/span>\n  <\/head<\/span>><\/span>\n  <body<\/span>><\/span>\n    <main<\/span>><\/span>\n      <section<\/span> class<\/span>=\"bento\"<\/span>><\/span>\n            <article<\/span>><\/span>\n                <header<\/span>><\/span>\n                    <h2<\/span>><\/span>Box 1<\/h2<\/span>><\/span>\n                    <p<\/span>><\/span>Lorem ipsum dolor, sit amet consectetur adipisicing elit.<\/p<\/span>><\/span>\n                <\/header<\/span>><\/span>\n                <figure<\/span>><\/span>\n                    <img<\/span> src<\/span>=\".\/images\/0.png\"<\/span> alt<\/span>=\"ai generated anime picture\"<\/span>><\/span>\n                <\/figure<\/span>><\/span>\n            <\/article<\/span>><\/span>\n            <!-- 7 more articles here --><\/span>\n        <\/section<\/span>><\/span>\n    <\/main<\/span>><\/span>\n  <\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Useremo CSS moderno (Baseline) per rendere responsive la nostra base avendo un approccio mobile-first:<\/p>\n\n\n
:root<\/span> {\n    font-family<\/span>: system-ui, sans-serif;\n    font-size<\/span>: clamp<\/span>(14px<\/span>, 5vw<\/span>, 20px<\/span>);\n    --dark-color<\/span>: #5c6378ff<\/span>;\n    --light-color<\/span>: #edf2f4ff<\/span>;\n    --background-color<\/span>: #2b2d42ff<\/span>;\n    --secondary-color<\/span>: #757e93ff<\/span>;\n    --antiflash-white<\/span>: #edf2f4ff<\/span>;\n    --important-color<\/span>: #ef233cff<\/span>;\n    --fire-engine-red<\/span>: #d90429ff<\/span>;\n}\n\nbody<\/span> {\n    background-color<\/span>: var<\/span>(--background-color);\n    color<\/span>: var<\/span>(--light-color);\n    margin<\/span>: 0<\/span>;\n}\n\narticle<\/span> {\n    background-color<\/span>: var<\/span>(--light-color);\n    color<\/span>: var<\/span>(--dark-color);\n    padding<\/span>: 1rem<\/span>;\n    margin-bottom<\/span>: 1rem<\/span>;\n}\n\narticle<\/span> figure<\/span> {\n    margin<\/span>: 0<\/span>;\n}\n\nimg<\/span> {\n    display<\/span>: block;\n    width<\/span>: 100%<\/span>;\n}\n\nmain<\/span> {\n    width<\/span>: 90%<\/span>;\n    max-width<\/span>: 1200px<\/span>;\n    margin-inline<\/span>: auto;\n    padding-block-start<\/span>: 2rem<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>
\n
Per sperimentare con un layout bento aggiungiamo qualche articolo ed osserviamo che di default, se ci limitiamo a pochi cambiamenti nel foglio di stile, i nostri elementi html appariranno accessibili e perfettamente fruibili: less is more in CSS \ud83c\udf63<\/p>\n<\/div><\/div>\n\n\n\n
Bento con grid layout<\/h2>\n\n\n\n
La tecnica ideale per un layout modulare fatto di contenitori \u00e8 impostare la propriet\u00e0 css display<\/code> delle nostre section<\/code> a grid<\/code> ma per poter giocare con la posizione e la forma degli articoli avremo qualche accorgimento aggiuntivo che ci verr\u00e0 comodo in seguito.<\/p>\n\n\n
.bento<\/span> {\n    --bento-cols<\/span>: 5<\/span>;\n    --bento-rows<\/span>: 3<\/span>;\n    --bento-border-radius<\/span>: 1rem<\/span>;\n    --bento-gap<\/span>: 1rem<\/span>;\n    display<\/span>: grid;\n    grid-template-columns<\/span>: repeat<\/span>(var(--bento-cols), 1<\/span>fr);\n    grid-template-rows<\/span>: repeat<\/span>(var(--bento-rows), 1<\/span>fr);\n    width<\/span>: 100%<\/span>;\n    aspect-ratio<\/span>: var<\/span>(--bento-cols) \/ var<\/span>(--bento-rows);\n}\n\n.bento<\/span>>* {\n    overflow<\/span>: hidden;\n    position<\/span>: relative;\n    margin<\/span>: calc<\/span>(var(--bento-gap) \/ 2<\/span>);\n    border-radius<\/span>: var<\/span>(--bento-border-radius);\n}\n\n@media<\/span> screen and<\/span> (aspect-ratio < 1<\/span>) {\n\n    .bento<\/span> {\n        --bento-cols<\/span>: 3<\/span>;\n        --bento-rows<\/span>: 5<\/span>;\n    }\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Abbiamo introdotto alcune variabili<\/em> per controllare il numero di colonne e di righe. Utilizzeremo questi due valori per impostare in quante frazioni<\/em> dividere la mia “griglia bento” e poter calcolare la propriet\u00e0 aspect-ratio<\/code> cio\u00e8 in che rapporto sono larghezza e altezza. Questo piccolo trucco ninja ci permette di avere delle celle esattamente quadrate<\/strong> e sar\u00e0 questa la chiave della nostra strategia<\/strong>!<\/p>\n\n\n\n
\"Una<\/figure>\n\n\n\n
Affinch\u00e8 i miei article<\/code> siano contenuti nelle celle abbiamo aggiunto la regola overflow: hidden<\/code>.<\/p>\n\n\n\n
Per mantenere l’elasticit\u00e0 del nostro design \u00e8 importante non usare la propriet\u00e0 gap<\/code><\/strong> della grid<\/code> perch\u00e9 questo rompe il rapporto tra altezza e larghezza totali e i moduli (gli elementi nel nostro bento non sono pi\u00f9 esattamente quadrati). Sfrutteremo il margin<\/code> dei contenuti per distanziare gli alimenti\/elementi del nostro bento.<\/p>\n\n\n\n
Personalizza il tuo bento design<\/h2>\n\n\n\n
Finalmente arriva la parte pi\u00f9 divertente e specifica di questo tutorial! Personalizziamo il nostro bento box decidendo di quante celle si “allarga” un elemento: usando un valore span 2<\/code> sulle propriet\u00e0 grid-colum<\/code> o grid-row<\/code> possiamo ottenere moduli orizzontali (2×1 celle) e verticali (1×2 celle) e combinandoli otteniamo una cella grande quadrata (2×2 celle).<\/p>\n\n\n\n
Siamo pronti a specificare cos\u00ec che forma (e importanz\u00e0) avranno i nostri article<\/code> in base all’ordine in cui sono nella section<\/code>: aggiungiamo una classe layout-1<\/code> che sar\u00e0 il nostro template riusabile ed il gioco \u00e8 fatto!<\/p>\n\n\n
.bento<\/span>.layout-1<\/span>> :nth-child(1)<\/span> {\n    grid-column<\/span>: span 2<\/span>;\n    grid-row<\/span>: span 2<\/span>;\n  background-color<\/span>: var<\/span>(--important-color);\n  color<\/span>: var<\/span>(--light-color);\n}\n\n.bento<\/span>.layout-1<\/span>> :nth-child(2)<\/span> {\n    grid-row<\/span>: span 2<\/span>;\n  background-color<\/span>: var<\/span>(--secondary-color);\n  color<\/span>: var<\/span>(--light-color);\n}\n\n.bento<\/span>.layout-1<\/span>> :nth-child(3)<\/span>,\n.bento<\/span>.layout-1<\/span>> :nth-child(4)<\/span>,\n.bento<\/span>.layout-1<\/span>> :nth-child(8)<\/span> {\n    grid-column<\/span>: span 2<\/span>;\n  background-color<\/span>: var<\/span>(--dark-color);\n  color<\/span>: var<\/span>(--light-color);\n}\n\n.bento<\/span>.layout-1<\/span>> :nth-child(n<\/span> + 9) {\n    display<\/span>: none;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Bento Layout verticale<\/h2>\n\n\n\n
Su uno schermo verticale potremmo dover riarrangiare il nostro bento layout. Cogliamo questa opportunit\u00e0 per creare un layout specifico invertendo il numero di colonne e righe e reimpostando i nostri moduli perch\u00e9 abbiano un equilibrio su display verticali.<\/p>\n\n\n\n
\"\"<\/figure>
\n@media<\/span> screen and<\/span> (aspect-ratio < 1<\/span>) {\n\n  .bento<\/span>.layout-1<\/span> {\n      --bento-cols<\/span>: 3<\/span>;\n      --bento-rows<\/span>: 5<\/span>;\n  }\n\n  .bento<\/span>.layout-1<\/span>> :nth-child(n)<\/span> {\n      \/* Reset spans *\/<\/span>\n      grid-column<\/span>: auto;\n      grid-row<\/span>: auto;\n  }\n\n  .bento<\/span>.layout-1<\/span>> :nth-child(1)<\/span>,\n  .bento<\/span>.layout-1<\/span>> :nth-child(8)<\/span> {\n      grid-column<\/span>: span 2<\/span>;\n      grid-row<\/span>: span 2<\/span>;\n  }\n\n  .bento<\/span>.layout-1<\/span>> :nth-child(5)<\/span> {\n      grid-column<\/span>: span 2<\/span>;\n  }\n\n  .bento<\/span>.layout-1<\/span>> :nth-child(7)<\/span> {\n      grid-column<\/span>: 1<\/span>;\n      grid-row<\/span>: 5<\/span>;\n  }\n  \n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre><\/div><\/div>\n\n\n\n
Bento box layout e container queries<\/h2>\n\n\n\n
Ed ora il piatto forte del nostro bento layout: usiamo le container query<\/em> per dare un design specifico ad ogni article<\/code><\/strong>!<\/p>\n\n\n\n
Prima di personalizzare i singoli format dei nostri elementi prepariamo una base comune che ci faciliti il lavoro:<\/p>\n\n\n
.bento<\/span>>* {\n  display<\/span>: flex;\n  flex-direction<\/span>: column-reverse;\n}\n\n.bento<\/span>.layout-1<\/span> h1<\/span>, .bento<\/span>.layout-1<\/span> h2<\/span>, .bento<\/span>.layout-1<\/span> h3<\/span>, .bento<\/span>.layout-1<\/span> p<\/span> {\n  margin<\/span>: 0<\/span>;\n}\n\n.bento<\/span>.layout-1<\/span>>* figure<\/span> {\n  position<\/span>: absolute;\n  inset<\/span>: 0<\/span>;\n}\n.bento<\/span>.layout-1<\/span>>* header<\/span> {\n  position<\/span>: relative;\n  z-index<\/span>: 1<\/span>;\n  background-color<\/span>: inherit;\n}\n\n.bento<\/span>.layout-1<\/span>>* figure<\/span> img<\/span> {\n    object-fit<\/span>: cover;\n    height<\/span>: 100%<\/span>;\n}\n\n.bento<\/span>.layout-1<\/span>>* header<\/span> {\n    position<\/span>: absolute;\n    bottom<\/span>: 0<\/span>;\n    inset-inline<\/span>: 0<\/span>;\n    border-radius<\/span>: 0<\/span>;\n    font-size<\/span>: 70%<\/span>;\n    padding<\/span>: 0.5rem<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Aggiungiamo finalmente le propriet\u00e0 CSS container-type<\/code> e container-name<\/code> per dare al contenuto dei nostri bento layout il super potere di fare query<\/em> sulle propriet\u00e0 come width<\/code>, height<\/code> e, super importante, aspect-ratio<\/code>!<\/p>\n\n\n
.bento<\/span> > * {\n  container-type<\/span>: size;\n  container-name<\/span>: bento-item;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Completiamo il nostro bento design caratterizzando i diversi formati in cui dovr\u00e0 apparire ogni articolo. Per farlo possiamo valutare le dimensioni (e quindi nascondere alcuni elementi) ma anche le proporzioni: il mio contenitore sar\u00e0 quadrato, verticale o orizzontale? Avr\u00e0 abbastanza spazio per tutto?<\/p>\n\n\n\n
Scopriamolo con le container queries<\/em>:<\/p>\n\n\n
\n@container<\/span> bento-item (width < 200px<\/span>) and<\/span> (height < 200px<\/span>) {\n  .bento<\/span>.layout-1<\/span>>* header<\/span> {\n    font-size<\/span>: 0.7rem<\/span>;\n  }\n  \n  .bento<\/span>.layout-1<\/span>>* header<\/span> p<\/span> {\n        display<\/span>: none;\n    }\n}\n\n@container<\/span> bento-item (aspect-ratio > 1<\/span>) {\n  .bento<\/span>.layout-1<\/span>>* header<\/span> {\n   top<\/span>: 0<\/span>;\n    right<\/span>: 60%<\/span>;\n  }\n  \n  .bento<\/span>.layout-1<\/span>> * figure<\/span> {\n    inset<\/span>: 0<\/span> 0<\/span> 0<\/span> 40%<\/span>;\n  }\n}\n\n\n@container<\/span> bento-item (aspect-ratio = 1<\/span>) and<\/span> (width > 200px<\/span>) {\n  .bento<\/span>.layout-1<\/span>>* header<\/span> {\n    font-size<\/span>: 120%<\/span>;\n    background-color<\/span>: #0006<\/span>;\n    color<\/span>: var<\/span>(--light-color);\n    backdrop-filter<\/span>: blur<\/span>(4px<\/span>);\n  }\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Micro-animazioni<\/h2>\n\n\n\n
Per dare vita al nostro bento layout, aggiungiamo delle micro-animazioni sottili ma efficaci. Le animazioni rendono l’interfaccia pi\u00f9 dinamica e piacevole, mantenendo sempre un approccio minimalista che rispecchia la filosofia del design bento.<\/p>\n\n\n\n
Prima di tutto, aggiungiamo una transizione fluida a tutti gli elementi del bento:<\/p>\n\n\n
.bento<\/span> > * {\n    transition<\/span>: transform 0.3s<\/span> ease-out, filter 0.3s<\/span> ease-out;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Creiamo un effetto di hover che solleva leggermente l’elemento e aggiunge una sottile ombra:<\/p>\n\n\n
.bento<\/span> > *:hover<\/span> {\n    transform<\/span>: translateY<\/span>(-0.5rem<\/span>);\n    filter<\/span>: drop-shadow<\/span>(0<\/span> 0.5rem<\/span> 0.1rem<\/span> #0009<\/span>);\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Per le immagini, possiamo aggiungere un leggero effetto di zoom unito ad un movimento verso il basso ottenendo una sorta di movimento di camera (come un dolly):<\/p>\n\n\n
.bento<\/span>.layout-1<\/span> > * figure<\/span> img<\/span> {\n    transition<\/span>: transform 1s<\/span>;\n}\n\n.bento<\/span>.layout-1<\/span> > *:hover<\/span> figure<\/span> img<\/span> {\n    transform<\/span>: scale<\/span>(1.50<\/span>) translateY<\/span>(15%<\/span>);\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Ricordiamoci di rispettare le preferenze di accessibilit\u00e0 dell’utente disabilitando le animazioni se prefers-reduced-motion<\/code> \u00e8 attivato nel browser:<\/p>\n\n\n
@media<\/span> (prefers-reduced-motion:<\/span> reduce) {\n    .bento<\/span> > *,\n    .bento<\/span>.layout-1<\/span> > * header<\/span>,\n    .bento<\/span>.layout-1<\/span> > * figure<\/span> img<\/span> {\n        transition<\/span>: none;\n    }\n    \n    .bento<\/span> > *:hover<\/span> {\n        transform<\/span>: none;\n    }\n    \n    .bento<\/span>.layout-1<\/span> > *:hover<\/span> figure<\/span> img<\/span> {\n        transform<\/span>: none;\n    }\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Conclusioni<\/h2>\n\n\n\n
In questo tutorial abbiamo esplorato come creare un moderno Bento Box Layout utilizzando CSS contemporaneo. Partendo dalla filosofia del bento giapponese, abbiamo costruito un’interfaccia modulare usando:<\/p>\n\n\n\n