Bento grid
Also called bento layout or bento box layout
A grid of rounded tiles in mixed sizes that fit together like a bento lunch box, often used to show several features at once.
// Spans only apply from sm up; on phones every tile is one cell in one column.
const TILES = [
{
title: 'Live preview',
text: 'See every change while the AI makes it.',
span: 'sm:col-span-2 sm:row-span-2'
},
{
title: 'Team',
text: 'Invite collaborators to any project.',
span: 'sm:row-span-2'
},
{ title: '12k', text: 'Apps published', span: '' },
{ title: '99.99%', text: 'Uptime last quarter', span: '' },
{
title: 'Database',
text: 'Browse and edit your data.',
span: 'sm:col-span-2'
},
{
title: 'Deploy',
text: 'Publish to your own domain.',
span: 'sm:col-span-2'
}
];
export function FeatureBento() {
return (
<section className='mx-auto grid max-w-6xl auto-rows-[180px] gap-4 p-6 sm:grid-cols-2 lg:grid-cols-4'>
{TILES.map((tile) => (
<article
key={tile.title}
className={`flex flex-col justify-end rounded-3xl border bg-muted p-6 ${tile.span}`}
>
<h3 className='text-lg font-semibold'>{tile.title}</h3>
<p className='text-sm text-muted-foreground'>{tile.text}</p>
</article>
))}
</section>
);
}Create a bento grid for the features section: 4 columns and 3 rows of 180px with 16px gaps and 24px corner radius. Make "Live preview" a 2×2 tile, "Team" 1×2, "Database" and "Deploy" 2×1, and two 1×1 tiles for quick stats. Drop to 2 columns under 1024px and 1 column under 640px.
Paste into Layerwise or any AI coding tool.
What is Bento grid?
A bento grid packs content into tiles of different sizes that fit together into a neat rectangle: one large tile for the headline feature, wide and tall tiles for supporting ones, and small squares for quick facts. Apple made it popular in product presentations, and it is now common on landing pages and portfolios.
Tile size signals importance, so put the strongest feature in the biggest tile. Keep the corner radius, gaps, and padding the same across tiles, and give each tile one idea: a short title, a line of text, and a visual.
Build it with CSS Grid: set a fixed number of columns and let tiles span cells with grid-column: span 2 or grid-row: span 2. On phones, drop to one or two columns so tiles stay readable. grid-auto-flow: dense fills holes automatically, but it can show tiles in a different order than the HTML, which confuses keyboard and screen reader users.
Often confused with
- Masonry layout
- A masonry layout stacks items of any height into columns with no row lines. A bento grid uses planned tile sizes that line up on a shared grid.
Related terms
All termsCSS Grid
A CSS layout system that places items on rows and columns at once, so content lines up in both directions.
Card
A bordered, rounded container that groups one item’s image, title, details, and actions so it can sit in a list or grid with others.
Masonry layout
A layout of columns where items of different heights stack tightly with no row lines, like stones in a wall or a Pinterest board.
Layout animation
An animation that smoothly moves and resizes elements when the layout changes, such as list items gliding to new spots after a sort or filter.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.
