How to make a bento grid — step by step, no code

The steps

1. 1

   Pick a template

   Start from the template nearest your job: Keynote or Product Showcase for launches, Dashboard for metrics, Pitch Deck for one-pagers, Magazine for editorial digests, Minimal Grid to build freeform. Templates carry proven composition so you never face a blank canvas.

2. 2

   Decide the hierarchy first

   Before typing, decide the single most important message — it gets the biggest tile. Bento design is hierarchy made visible; if everything is the same size, nothing is important.

3. 3

   Write real copy into panels

   Replace placeholders with your actual headlines and one-line descriptions. Text panels support font families, weights, letter spacing, alignment and glow — headline tiles should look like headlines.

4. 4

   Drop in images and crop in place

   Enable images on panels that need screenshots or photos; crop, rotate and filter them inside the editor so they fill their compartments cleanly.

5. 5

   Add one chart or device mockup

   One vector chart (pie, donut, bar, line or area with your real data) or one 3D device mockup (laptop, phone, tablet, monitor, browser with tilt and perspective) lifts the board from 'text tiles' to 'designed artifact'. Resist adding five.

6. 6

   Tune colour with panel variants

   Cycle panels through the built-in variants — base, gradient, teal, purple, accent, glass — so adjacent tiles contrast. Consistent gaps (12px default) and uniform corner radii keep the composition calm.

7. 7

   Export or share

   Export PNG or JPEG at 2x for feeds and docs, PDF for email and print, or generate a tokenized share link so others view the interactive board. Your work autosaves with undo history and restorable versions.

Common bento grid mistakes

Equal-sized everything (kills hierarchy), too many colour variants (kills calm), text crammed to tile edges (kills the compartment feel), and decorative charts with fake data (kills trust). Fix by choosing one hero tile, limiting to two or three variants, letting padding breathe, and charting only numbers you can defend.

Doing it in CSS instead

If you need a live web page rather than an exported artifact, CSS Grid with grid-template-columns: repeat(12, 1fr) and per-tile column/row spans is the standard approach, and code-output tools exist for scaffolding it. Use a visual maker when the deliverable is the graphic itself — a launch image, one-pager, recap or portfolio board — which is Flocci Bento's territory.

Frequently asked questions