AI Website Guides · 2026-10-05 · 5 min read
Bento Grid Landing Page: Layout Patterns, CSS Code and Design Rules
A bento grid landing page arranges features, proof and visuals into a tidy mosaic of tiles of different sizes, like the compartments of a bento box. It scans fast, shows hierarchy at a glance and adapts well to responsive screens. This guide covers the layout patterns, the CSS grid code, what to put in each tile, and where to find ready-made components.
Written by AmJ, founder of Scrollhaus, and edited by the Scrollhaus editorial team. Sources and methodology are documented in the article.
Key takeaways
Disclosure: ScrollHaus publishes this guide. Component library details come from each library's public pages, read on October 5, 2026.
What is a bento grid?
A bento grid is a layout of rectangular tiles of different sizes that fit together without gaps. Each tile carries one idea: a feature, a number, a quote, a screenshot or an illustration. The pattern became common in product marketing because it lets a page show several benefits at once while keeping a clear hierarchy, since the biggest tile is the most important.
When to use a bento grid on a landing page
- You have four to eight distinct features that each need a visual.
- You want a feature section that scans in a few seconds.
- You are showing a product with several facets, such as a dashboard, an app or a tool.
- You want a layout that reflows cleanly from desktop to phone.
Do not use it for a single long argument. A bento grid breaks content into pieces, so if your message needs a continuous story, use a pinned scroll section or a plain article layout instead.
Five bento grid layout patterns
1. Hero tile plus four supports
One large tile on the left with four small tiles stacked on the right. The large tile carries the main benefit.
2. Three-column mosaic
Mixed one-by-one, two-by-one and one-by-two tiles in three columns. It is the classic look.
3. Feature row with proof strip
Three feature tiles on top and a wide strip of numbers or logos underneath.
4. Asymmetric product tour
Tiles of different heights that follow the order of the product workflow, from first click to result.
5. Dashboard-style grid
Small data tiles around a central chart, which suits analytics and finance products.
Bento grid layout in CSS
CSS grid makes a bento layout short to write. Define columns, then let tiles span rows and columns:
.bento{display:grid;gap:16px;
grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(180px,auto)}
.tile{border-radius:20px;padding:24px;background:#16161a;overflow:hidden}
.tile.wide{grid-column:span 2}
.tile.tall{grid-row:span 2}
.tile.hero{grid-column:span 2;grid-row:span 2}
@media (max-width:900px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.bento{grid-template-columns:1fr}
.tile.wide,.tile.tall,.tile.hero{grid-column:auto;grid-row:auto}}For a more readable layout use named areas:
.bento{grid-template-areas:
"a a b c"
"a a d d"
"e f d d"}
.t1{grid-area:a}.t2{grid-area:b}.t3{grid-area:c}Design rules that make a bento grid work
- Visual hierarchy: the largest tile gets the most important message. Do not make all tiles the same weight.
- One idea per tile: a headline, one supporting line and one visual.
- Consistent spacing and radius: equal gaps and one corner radius make it feel designed.
- A restrained palette: one accent colour, with neutrals for the rest.
- Contrast and readable type: check text on every tile background.
- A clear call to action: put a button in or directly under the grid, not hidden in a tile.
What to put in each tile
| Tile type | Content |
|---|---|
| Hero tile | Main benefit with product screenshot or illustration |
| Proof tile | One number and a short caption, or a customer quote |
| Feature tile | Icon or small visual, a short headline |
| Integration tile | Logos or an animated list |
| Action tile | Button, price or email field |
Animating a bento grid
Subtle motion makes a bento grid feel alive. Fade and lift tiles in with a short stagger as they enter the screen, add a gentle hover lift or a spotlight that follows the pointer, and animate numbers when they appear. Keep each animation short, avoid animating layout, and respect the reduced-motion setting. For patterns and performance see website animations and scroll animation performance.
Ready-made bento grid components
- Magic UI offers a bento grid component in its docs.
- Aceternity UI has a bento grid component page too.
- 21st.dev and React Bits list community and open-source variants.
All of them copy into your project, so you can restyle them. See our comparison of Magic UI, Aceternity UI, React Bits and 21st.dev to pick one.
Build a bento grid with an AI tool
Describe the grid by its tiles: "4-column bento grid; hero tile spanning 2 by 2 with a product screenshot; two proof tiles with one number each; one wide integration tile; one action tile with an email field; collapses to two columns at 900 px and one at 560 px." Ask for CSS grid, not absolute positioning. For the full workflow see how to make an animated website with AI.
Explore animated website templates at Scrollhaus →
Need help with a template, account, or project? Email admin@scrollhaus.ai.