Flocci Bento guide
What is a bento grid?
A bento grid is a modular web-design layout that arranges content into distinct rounded tiles of different sizes on one underlying grid — named after compartmentalised Japanese bento lunch boxes. Popularised by Apple's product keynotes in the early 2020s, it lets viewers scan mixed content (text, images, charts, stats) quickly because every item has its own clearly bounded compartment.
Where the bento grid comes from
The name is literal: a bento box holds rice, protein and sides in tidy compartments of different sizes. Interface designers borrowed the idea for dashboards and marketing pages, and Apple's keynote feature-summary slides — a wall of rounded tiles, one feature per tile, sizes signalling importance — made it a mainstream design grammar. Today bento grids appear in product landing pages, portfolios, app dashboards and launch announcements.
Anatomy of a good bento grid
Under every bento composition sits a uniform grid — commonly 12 columns. Tiles span different column/row counts, which is where the visual interest comes from, but they always align to the same tracks, which is where the calm comes from. Good bento design uses size as hierarchy (biggest tile = most important message), keeps gaps consistent (Flocci Bento defaults to 12px), rounds corners uniformly, and mixes content types — text, image, chart, quote — so adjacent tiles contrast.
Bento grid vs. ordinary CSS grid
Every bento grid is a grid, but not every grid is bento. An ordinary grid repeats equal cells (think photo galleries); a bento grid deliberately varies spans to create an asymmetric, editorial composition while preserving alignment. The compartment metaphor also implies each tile is self-contained — its own background, its own message — rather than cells of one continuous surface.
How to make one (without writing CSS)
You can hand-write CSS Grid, or use a visual editor. Flocci Bento gives you a drag-and-drop 12-column bento engine with six templates (Keynote, Product Showcase, Minimal Grid, Dashboard, Magazine, Pitch Deck), rich text, image, chart and device-mockup panels, and PNG/JPEG/PDF export — free to start, no card. Designers who need production CSS output are better served by code generators; Bento is for producing the designed artifact itself.
Frequently asked questions
Why is it called a bento grid?
After Japanese bento lunch boxes, which hold different foods in tidy compartments of varying sizes — exactly how the layout holds different content types in differently-sized tiles.
Who made bento grids popular?
Apple, primarily — its keynote feature-summary slides used walls of rounded tiles and turned the pattern into a recognisable design language across the industry in the early 2020s.
How many columns should a bento grid have?
Twelve is the practical standard: it divides into halves, thirds, quarters and sixths, giving maximum layout flexibility. Flocci Bento's engine is 12-column by default with adjustable row height and gaps.
What content works in a bento grid?
Anything scannable: feature blurbs, stats, charts, screenshots in device frames, quotes and photos. The format rewards mixing types so neighbouring tiles contrast.
Where can I make a bento grid for free?
Flocci Bento (bento.flocci.in) — a free-to-start online bento grid maker with templates, charts, device mockups and PNG/JPEG/PDF export.
Open the editor and build yours
Free to design, no card — founder credits included with every new workspace.