Home › Page Patterns › Bento grid
Bento grid
A grid of varied-size boxes packed together like a bento.
A bento grid is a layout where boxes of different sizes (small squares, wide rectangles, tall ones) tile together like a Japanese lunch box. Apple uses it heavily on product pages — each cell holds a single feature highlight.
The varied sizes create visual rhythm without feeling random. Anchor with one large hero cell and balance with smaller satellites. Keep cells aligned to a shared grid so the whole thing reads as deliberate.