Seven bento box layouts: the classic mix of big and small tiles, a product feature section, a link-in-bio page, key numbers as tiles, dark tiles with coloured glows, a bento described with named grid areas and clickable tiles that lift on hover.
The bento box grid: one large tile, a tall one and several small ones in a four-column grid, each tile placed with column and row spans. Under 440px of container width it collapses to two columns with the spans reduced, so no tile is ever squeezed.
A product page section where each tile explains one feature with a heading, a line of text and a small visual. Tiles have different spans to give the main feature more room, and they are list items in reading order.
View code
<div class="bt2"><ul><li class="big"><h3>Offline first</h3><p>Everything works on a plane.</p><span class="vis" aria-hidden="true"></span></li><li><h3>Sync</h3><p>Instant across devices.</p></li><li><h3>Encrypted</h3><p>Only you hold the key.</p></li><li class="wide"><h3>Share links</h3><p>Send a read-only link in a click.</p></li></ul></div>
A personal page made of tiles: a profile tile, a latest post, social links and a newsletter tile, the bento style popular for link-in-bio pages. Each tile is a link or a section with a heading, so the page is still a sensible list.
Key numbers arranged as a bento, with the most important stat in the biggest tile. Each tile pairs the number with its label as a description list group, so the figures make sense out of their visual context.
View code
<dl class="bt4"><div class="big"><dt>Monthly revenue</dt><dd>$128k</dd></div><div><dt>Orders</dt><dd>3,410</dd></div><div><dt>Return rate</dt><dd>2.1%</dd></div><div class="wide"><dt>Customers who came back</dt><dd>41%</dd></div></dl>
A dark bento where each tile has a faint coloured glow in one corner, the look of many modern product pages. The glow is a radial gradient in the tile's background, positioned differently per tile with a custom property.
The bento layout written as grid-template-areas, which makes the arrangement easy to read and to rearrange: a different areas map in a container query reorganises the tiles for narrow spaces without touching any tile.
View code
<div class="bt6"><div class="in"><section class="h">Hero</section><section class="s">Speed</section><section class="p">Privacy</section><section class="t">Teams</section><section class="c">Call to action</section></div></div>
Clickable bento tiles that lift and gain a shadow on hover or focus, with an arrow that nudges forward. The whole tile is the link, so the target is large, and the hover state is mirrored on :focus-visible.
A bento is a regular grid where some tiles span two columns or two rows. Set grid-auto-rows to a fixed height so spans produce predictable shapes.
Most important, biggest
Give the largest tile to the main message and keep the rest secondary. A bento where every tile shouts looks like a collage, not a layout.
Plan the narrow version
Four columns of tiles do not fit a phone. Reduce to two columns in a container query and shrink the spans, or redraw the layout with a different areas map.
Tiles are still content
Each tile should have a heading or label in text, not only an image, and the tiles should be in a sensible reading order in the HTML.
Frequently asked questions
Where does the name bento come from?
From Japanese lunch boxes with compartments of different sizes.
Grid spans or named areas?
Spans for flexible tile lists; named areas when the layout is fixed and you want it readable.
Can tiles contain video or charts?
Yes. Give media tiles an aspect ratio so they keep their shape.