{"id":31563,"date":"2025-01-21T11:46:44","date_gmt":"2025-01-21T10:46:44","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/?p=31563"},"modified":"2025-01-28T09:27:07","modified_gmt":"2025-01-28T08:27:07","slug":"lets-create-a-bento-box-design-layout-using-modern-css","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/","title":{"rendered":"Let’s Create a Bento Box Design Layout Using Modern CSS"},"content":{"rendered":"\n

A Bento box (\ud83c\udf71) is a traditional Japanese lunchbox<\/strong> that neatly and separately organizes various prepared dishes. Bringing a ready-made bento to school is a gesture of affection toward the recipient. The care in organizing and presenting the dishes\u2014besides the quality of the food\u2014represents how much the person means to you.<\/p>\n\n\n\n

Inspired by this practice and this object’s minimalist, balanced, and functional design, a trend in UX\/UI design has emerged called the Bento Layout (or Bento Box Layout). This tutorial focuses on this design approach: instead of rice, carrots, or octopus-shaped sausages, we’ll use modern HTML and CSS as our ingredients<\/a>, combined with the same level of care and affection.<\/p>\n\n\n\n

\n\n\n\n

Bento Box With CSS: The Basics<\/strong><\/h3>\n\n\n\n

For our experiment, we\u2019ll start with a simple but very common base structure: a main<\/code> element containing several section<\/code> elements. Each section<\/code> contains multiple article<\/code> elements, each with its header<\/code> and an image wrapped in a semantic figure<\/code> element:<\/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
We\u2019ll use modern CSS (Baseline) to make our base responsive with a mobile-first approach:<\/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\n\n\n
With a few changes to the stylesheet, our HTML elements are accessible and perfectly usable by default: less is more in CSS \ud83c\udf63.<\/p>\n\n\n\n
\n\n\n\n
Bento with Grid Layout<\/strong><\/h3>\n\n\n\n
For a modular layout composed of containers, we\u2019ll set the display<\/code> property of our section<\/code> elements to grid<\/code>. To customize the position and shape of the articles, we\u2019ll add some extra settings for flexibility.<\/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    .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
We\u2019ve introduced variables to control the number of columns and rows, dividing the “bento grid” into equal fractions. Using the aspect-ratio<\/code> property ensures the cells are perfectly square, which is the key to our strategy.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n\n\n\n
Customize Your Bento Design<\/strong><\/h3>\n\n\n\n
Let\u2019s personalize the bento box by specifying how many cells each element spans. Using the span<\/code> value in grid-column<\/code> or grid-row<\/code> properties, we can create horizontal (2\u00d71 cells), vertical (1\u00d72 cells), and large square (2\u00d72 cells) modules.<\/p>\n\n\n\n
Here\u2019s how to define a reusable template with a layout-1<\/code> class:<\/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(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><\/div>\n\n\n
\n\n\n\n
Micro-Animations<\/strong><\/h3>\n\n\n\n
Add subtle micro-animations to enhance the interface:<\/p>\n\n\n
.bento<\/span> > * {\n    transition<\/span>: transform 0.3s<\/span> ease-out, filter 0.3s<\/span> ease-out;\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
\"\"<\/figure><\/div>\n\n\n
\n\n\n\n
Conclusion<\/strong><\/h3>\n\n\n\n
This tutorial explored how to create a modern Bento Box Layout using CSS<\/strong>. We achieved a flexible, responsive, visually appealing design by combining grid layout, aspect ratio, container queries, and micro-animations. This approach is as versatile as a real bento box, allowing endless combinations while maintaining order and balance.<\/p>\n\n\n\n
Experiment with these ideas to find the perfect recipe for your special bento! Bon app\u00e9tit!<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
A Bento box (\ud83c\udf71) is a traditional Japanese lunchbox that neatly and separately organizes various prepared dishes. Bringing a ready-made bento to school is a gesture of affection toward the recipient. The care in organizing and presenting the dishes\u2014besides the quality of the food\u2014represents how much the person means to you. Inspired by this practice… Read more<\/a><\/p>\n","protected":false},"author":255,"featured_media":31509,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","_uag_custom_page_level_css":"","_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[6],"tags":[13026,66,13028,9959],"collections":[],"class_list":{"0":"post-31563","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-frontend","8":"tag-bento","9":"tag-css","10":"tag-design","11":"tag-ux","12":"entry"},"yoast_head":"\nLet's Create a Bento Box Design Layout Using Modern CSS<\/title>\n<meta name=\"description\" content=\"Learn how to create a bento box design layout with CSS and design layouts inspired by this Japanese aesthetic trend.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Let's Create a Bento Box Design Layout Using Modern CSS\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a bento box design layout with CSS and design layouts inspired by this Japanese aesthetic trend.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Codemotion Magazine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Codemotion.Italy\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-01-21T10:46:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-28T08:27:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1792\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Massimo Avvisati\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MassimoAvvisati\" \/>\n<meta name=\"twitter:site\" content=\"@CodemotionIT\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Massimo Avvisati\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/\"},\"author\":{\"name\":\"Massimo Avvisati\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a\"},\"headline\":\"Let’s Create a Bento Box Design Layout Using Modern CSS\",\"datePublished\":\"2025-01-21T10:46:44+00:00\",\"dateModified\":\"2025-01-28T08:27:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/\"},\"wordCount\":392,\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil.webp\",\"keywords\":[\"bento\",\"CSS\",\"design\",\"UX\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/\",\"name\":\"Let's Create a Bento Box Design Layout Using Modern CSS\",\"isPartOf\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil.webp\",\"datePublished\":\"2025-01-21T10:46:44+00:00\",\"dateModified\":\"2025-01-28T08:27:07+00:00\",\"description\":\"Learn how to create a bento box design layout with CSS and design layouts inspired by this Japanese aesthetic trend.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#primaryimage\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil.webp\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil.webp\",\"width\":1792,\"height\":1024},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\/\/www.codemotion.com\/magazine\/frontend\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Let’s Create a Bento Box Design Layout Using Modern CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#website\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"name\":\"Codemotion Magazine\",\"description\":\"We code the future. Together\",\"publisher\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#organization\",\"name\":\"Codemotion\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png\",\"width\":225,\"height\":225,\"caption\":\"Codemotion\"},\"image\":{\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Codemotion.Italy\/\",\"https:\/\/x.com\/CodemotionIT\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a\",\"name\":\"Massimo Avvisati\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg\",\"contentUrl\":\"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg\",\"caption\":\"Massimo Avvisati\"},\"description\":\"I am a full-stack developer, digital artist, maker, and educator with a passion for Artificial Intelligence. I create immersive installations and develop educational software, pushing the boundaries of technology. I believe in Free Software and Creative Commons licensing as a foundation for knowledge sharing. My goal is to craft unique and engaging educational experiences using cutting-edge technology, showcasing the potential of AI in education. Currently, my focus is on Educational Technology, where I strive to create innovative software and hardware tools that engage and inspire learners. I firmly believe in the power of Free Software and Creative Commons, utilizing these open platforms to ensure my work is accessible and reusable by others. I actively reject restrictive platforms that limit creativity and collaboration. By combining my artistic vision with cutting-edge technology, I aim to develop unique educational experiences that spark curiosity and foster a love of learning. Through my work, I strive to demonstrate the incredible potential of AI in education and the arts.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/massimo-avvisati-7220312\/\",\"https:\/\/x.com\/MassimoAvvisati\"],\"knowsAbout\":[\"Javascript\",\"Node.js\",\"PHP\",\"AI\",\"Machine Learning\",\"Web Development\",\"Free Software\"],\"knowsLanguage\":[\"English\",\"Spanish\",\"Italian\"],\"jobTitle\":\"Head of EdTech R&D\",\"worksFor\":\"Codemotion spa\",\"url\":\"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Let's Create a Bento Box Design Layout Using Modern CSS","description":"Learn how to create a bento box design layout with CSS and design layouts inspired by this Japanese aesthetic trend.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/","og_locale":"en_US","og_type":"article","og_title":"Let's Create a Bento Box Design Layout Using Modern CSS","og_description":"Learn how to create a bento box design layout with CSS and design layouts inspired by this Japanese aesthetic trend.","og_url":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/","og_site_name":"Codemotion Magazine","article_publisher":"https:\/\/www.facebook.com\/Codemotion.Italy\/","article_published_time":"2025-01-21T10:46:44+00:00","article_modified_time":"2025-01-28T08:27:07+00:00","og_image":[{"width":1792,"height":1024,"url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil.webp","type":"image\/webp"}],"author":"Massimo Avvisati","twitter_card":"summary_large_image","twitter_creator":"@MassimoAvvisati","twitter_site":"@CodemotionIT","twitter_misc":{"Written by":"Massimo Avvisati","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#article","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/"},"author":{"name":"Massimo Avvisati","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a"},"headline":"Let’s Create a Bento Box Design Layout Using Modern CSS","datePublished":"2025-01-21T10:46:44+00:00","dateModified":"2025-01-28T08:27:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/"},"wordCount":392,"publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil.webp","keywords":["bento","CSS","design","UX"],"articleSection":["Frontend"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/","url":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/","name":"Let's Create a Bento Box Design Layout Using Modern CSS","isPartOf":{"@id":"https:\/\/www.codemotion.com\/magazine\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#primaryimage"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil.webp","datePublished":"2025-01-21T10:46:44+00:00","dateModified":"2025-01-28T08:27:07+00:00","description":"Learn how to create a bento box design layout with CSS and design layouts inspired by this Japanese aesthetic trend.","breadcrumb":{"@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#primaryimage","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil.webp","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil.webp","width":1792,"height":1024},{"@type":"BreadcrumbList","@id":"https:\/\/www.codemotion.com\/magazine\/frontend\/lets-create-a-bento-box-design-layout-using-modern-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codemotion.com\/magazine\/"},{"@type":"ListItem","position":2,"name":"Frontend","item":"https:\/\/www.codemotion.com\/magazine\/frontend\/"},{"@type":"ListItem","position":3,"name":"Let’s Create a Bento Box Design Layout Using Modern CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.codemotion.com\/magazine\/#website","url":"https:\/\/www.codemotion.com\/magazine\/","name":"Codemotion Magazine","description":"We code the future. Together","publisher":{"@id":"https:\/\/www.codemotion.com\/magazine\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codemotion.com\/magazine\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codemotion.com\/magazine\/#organization","name":"Codemotion","url":"https:\/\/www.codemotion.com\/magazine\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2019\/11\/codemotionlogo.png","width":225,"height":225,"caption":"Codemotion"},"image":{"@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Codemotion.Italy\/","https:\/\/x.com\/CodemotionIT"]},{"@type":"Person","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/7d033c17576f9bdfec9dab783e58976a","name":"Massimo Avvisati","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codemotion.com\/magazine\/#\/schema\/person\/image\/","url":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg","contentUrl":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2024\/04\/massimo-100x100.jpeg","caption":"Massimo Avvisati"},"description":"I am a full-stack developer, digital artist, maker, and educator with a passion for Artificial Intelligence. I create immersive installations and develop educational software, pushing the boundaries of technology. I believe in Free Software and Creative Commons licensing as a foundation for knowledge sharing. My goal is to craft unique and engaging educational experiences using cutting-edge technology, showcasing the potential of AI in education. Currently, my focus is on Educational Technology, where I strive to create innovative software and hardware tools that engage and inspire learners. I firmly believe in the power of Free Software and Creative Commons, utilizing these open platforms to ensure my work is accessible and reusable by others. I actively reject restrictive platforms that limit creativity and collaboration. By combining my artistic vision with cutting-edge technology, I aim to develop unique educational experiences that spark curiosity and foster a love of learning. Through my work, I strive to demonstrate the incredible potential of AI in education and the arts.","sameAs":["https:\/\/www.linkedin.com\/in\/massimo-avvisati-7220312\/","https:\/\/x.com\/MassimoAvvisati"],"knowsAbout":["Javascript","Node.js","PHP","AI","Machine Learning","Web Development","Free Software"],"knowsLanguage":["English","Spanish","Italian"],"jobTitle":"Head of EdTech R&D","worksFor":"Codemotion spa","url":"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/"}]}},"featured_image_src":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-600x400.webp","featured_image_src_square":"https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-600x600.webp","author_info":{"display_name":"Massimo Avvisati","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/"},"uagb_featured_image_src":{"full":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil.webp",1792,1024,false],"thumbnail":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-150x150.webp",150,150,true],"medium":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-300x171.webp",300,171,true],"medium_large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-768x439.webp",768,439,true],"large":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-1024x585.webp",1024,585,true],"1536x1536":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-1536x878.webp",1536,878,true],"2048x2048":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil.webp",1792,1024,false],"small-home-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-100x100.webp",100,100,true],"sidebar-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-180x128.webp",180,128,true],"genesis-singular-images":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-896x504.webp",896,504,true],"archive-featured":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-400x225.webp",400,225,true],"gb-block-post-grid-landscape":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-600x400.webp",600,400,true],"gb-block-post-grid-square":["https:\/\/www.codemotion.com\/magazine\/wp-content\/uploads\/2025\/01\/DALL\u00b7E-2025-01-20-12.10.13-A-horizontal-layout-design-of-a-bento-box-showcasing-an-organized-and-visually-appealing-arrangement-of-food.-The-bento-box-includes-compartments-fil-600x600.webp",600,600,true]},"uagb_author_info":{"display_name":"Massimo Avvisati","author_link":"https:\/\/www.codemotion.com\/magazine\/author\/massimo-avvisati\/"},"uagb_comment_info":0,"uagb_excerpt":"A Bento box (\ud83c\udf71) is a traditional Japanese lunchbox that neatly and separately organizes various prepared dishes. Bringing a ready-made bento to school is a gesture of affection toward the recipient. The care in organizing and presenting the dishes\u2014besides the quality of the food\u2014represents how much the person means to you. Inspired by this practice……","lang":"en","_links":{"self":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/31563","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/users\/255"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/comments?post=31563"}],"version-history":[{"count":2,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/31563\/revisions"}],"predecessor-version":[{"id":31741,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/posts\/31563\/revisions\/31741"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media\/31509"}],"wp:attachment":[{"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/media?parent=31563"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/categories?post=31563"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/tags?post=31563"},{"taxonomy":"collections","embeddable":true,"href":"https:\/\/www.codemotion.com\/magazine\/wp-json\/wp\/v2\/collections?post=31563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}