--- title: "Bento grid design: anatomy, variants and examples | Kombai" description: "A bento grid packs several messages into one section of unequal tiles, with the biggest tile for the message that matters most." canonical_url: https://kombai.com/glossary/bento-grid/ author: "The Kombai Team" --- # Bento grid A bento grid packs several messages into one section of unequal tiles, with the biggest tile for the message that matters most. - Also called: bento box layout - Platforms: Web, Mobile - In the Kombai gallery: [88 web designs](https://kombai.com/gallery/web/bento-grid/), [37 mobile designs](https://kombai.com/gallery/mobile/bento-grid/) - [Aurava](https://kombai.com/gallery/inspirations/bento-grid-web-1/) (Web) - [GridLeaf](https://kombai.com/gallery/inspirations/bento-grid-ios-3/) (Mobile) - [Playagrove](https://kombai.com/gallery/inspirations/bento-grid-web-52/) (Web) ## What is a bento grid? A bento grid is a section split into tiles of different sizes on one shared grid. A large anchor tile carries the main message, and smaller tiles around it each hold one feature, number or image. The mix of sizes ranks the messages, and the shared gutters hold them together as one block. - Tiles span different numbers of columns and rows on the same grid. - Each tile holds one idea: a title, a line of copy and a visual. ## When to use bento grid - **Several short messages.** Five or six features or facts that each need a line and a visual. - **One clear headliner.** One message deserves the big tile and the rest support it. - **Overview screens.** Home screens and dashboards that sum up many things at a glance. ## When not to use one - **Items of the same kind.** Products, posts or people belong in an even card grid. - **A sequence.** Steps people follow in order read better as a numbered list. - **Long explanations.** A tile holds a line or two. Longer copy belongs in a feature section. ## Anatomy 1. **Grid**: Shared columns and rows 2. **Anchor tile**: The biggest, for the main message 3. **Supporting tiles**: Smaller, one idea each 4. **Tile content**: Title, a line of copy, a visual 5. **Gutter**: One gap between every tile 6. **States**: Desktop, tablet, phone ## Variants We sorted every bento grid design in the Kombai gallery and found five patterns. ### 1. Product UI tiles The most common pattern. Each tile holds a small mock of one feature, like a chart, a form or a code panel, under a short title. - [Glazewick](https://kombai.com/gallery/inspirations/bento-grid-web-59/) (Web) - [Theodell](https://kombai.com/gallery/inspirations/bento-grid-web-38/) (Web) - [Pomandry](https://kombai.com/gallery/inspirations/bento-grid-web-64/) (Web) ### 2. Stat tiles Big numbers in their own tiles, set beside copy tiles, for results, scale or a track record. - [OCTA](https://kombai.com/gallery/inspirations/bento-grid-web-3/) (Web) - [Emberpath](https://kombai.com/gallery/inspirations/bento-grid-ios-27/) (Mobile) - [Skepwell](https://kombai.com/gallery/inspirations/bento-grid-web-53/) (Web) ### 3. Photo and mixed media Photography and art share the grid with copy tiles. Common for travel, brands and creative tools. - [Tórshavn](https://kombai.com/gallery/inspirations/bento-grid-web-7/) (Web) - [Prismcut](https://kombai.com/gallery/inspirations/bento-grid-ios-20/) (Mobile) - [Tussah](https://kombai.com/gallery/inspirations/bento-grid-web-25/) (Web) ### 4. Icon and illustration tiles A simple icon or drawing above a title and a line of copy, for values, principles and features with no UI to show. - [Studio Principles](https://kombai.com/gallery/inspirations/bento-grid-web-4/) (Web) - [Firnlow](https://kombai.com/gallery/inspirations/bento-grid-web-57/) (Web) - [Lamella Fold](https://kombai.com/gallery/inspirations/bento-grid-web-44/) (Web) ### 5. Wide tile over pairs The mobile pattern. One full-width tile on top, then rows of two small tiles, then full-width strips. - [Guidecraft](https://kombai.com/gallery/inspirations/bento-grid-ios-37/) (Mobile) - [Nightjar](https://kombai.com/gallery/inspirations/bento-grid-ios-33/) (Mobile) - [Kestrel Pay](https://kombai.com/gallery/inspirations/bento-grid-ios-6/) (Mobile) ## Where bento grids show up ### Feature overviews A landing page section where each tile shows one feature at work. - [Sinterlode](https://kombai.com/gallery/inspirations/bento-grid-web-87/) (Web) - [Kittiwake](https://kombai.com/gallery/inspirations/bento-grid-web-27/) (Web) - [Tuffcrest](https://kombai.com/gallery/inspirations/bento-grid-web-14/) (Web) ### Brand and design system boards Logo, color, type and imagery laid out as tiles, so a whole identity fits on one screen. - [Otto Labs](https://kombai.com/gallery/inspirations/bento-grid-web-8/) (Web) - [Colure](https://kombai.com/gallery/inspirations/bento-grid-web-69/) (Web) - [Hyphaline](https://kombai.com/gallery/inspirations/bento-grid-web-42/) (Web) ### Portfolios and studio pages Stats, portraits, client names and quotes, so a person or a team reads at a glance. - [Nils Godwit](https://kombai.com/gallery/inspirations/bento-grid-web-29/) (Web) - [Arcfolio](https://kombai.com/gallery/inspirations/bento-grid-ios-24/) (Mobile) - [Overcoil](https://kombai.com/gallery/inspirations/bento-grid-web-41/) (Web) ### Pricing and promotions A plan or an offer takes the big tile, with inclusions, perks or a booking button in the tiles around it. - [Ballastry](https://kombai.com/gallery/inspirations/bento-grid-web-61/) (Web) - [Ember & Oak](https://kombai.com/gallery/inspirations/bento-grid-web-6/) (Web) - [Heddle](https://kombai.com/gallery/inspirations/bento-grid-web-26/) (Web) ## Bento grid vs similar components | | [Bento grid](https://kombai.com/glossary/bento-grid/) | [Card](https://kombai.com/glossary/card/) | [Feature section](https://kombai.com/glossary/feature-section/) | [Gallery](https://kombai.com/glossary/gallery/) | |---|---|---|---|---| | Tiles | Unequal, on one grid | One self-contained block | Columns or alternating rows | Images in even rows | | Reads as | One composed section | One item among many | A list of benefits | A collection to browse | | Best for | Several messages at a glance | Posts, products and people | Explaining features in depth | Photos and visual work | ## Build notes - Build it with CSS grid. Tiles span columns and rows, and one gap sets every gutter. - Keep the HTML in reading order. Grid placement moves tiles only visually. - Avoid grid-auto-flow: dense when order matters. It fills holes by moving tiles out of sequence. - Collapse to one column on phones, with no sideways scrolling at 320 CSS pixels wide. - Give every tile its own heading, so screen reader users can jump from tile to tile. - Keep hover motion small, and turn it off under prefers-reduced-motion. ## FAQ ### Why is it called a bento grid? After the Japanese bento box, a lunch box split into compartments of different sizes. A bento grid does the same with content: one tray, several unequal sections, each holding one thing. ### How many tiles should a bento grid have? Enough to read in one screen, usually four to eight. Past that the anchor tile stops standing out and the grid reads as a wall of cards. Split a long list into two sections instead. ### How do bento grids work on mobile? They stack. Most mobile designs in the Kombai gallery put one full-width tile on top, then pairs of small tiles, then full-width strips. On a narrow phone, a single column in reading order is the safe default. ### What's the difference between a bento grid and a card grid? A card grid repeats equal cards for items of the same kind, like posts or products. A bento grid mixes sizes on purpose to rank several different messages, with the biggest tile for the most important one. ## Related terms - [Card](https://kombai.com/glossary/card/) - [Feature section](https://kombai.com/glossary/feature-section/) - [Gallery](https://kombai.com/glossary/gallery/) - [Stats section](https://kombai.com/glossary/stats-section/) ## References - [MDN: Grid layout and accessibility](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Grid_layout_and_accessibility) - [MDN: grid-auto-flow](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) - [WCAG 2.2: Understanding reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html) - [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)