Bento Layout Prompts
5 min read + 20 min hands-on
Target audience: Anyone building portfolios, product landing pages, or content-heavy dashboards.
Prerequisites: Basic familiarity with grid concepts (what "spans 2 columns" means is enough).
Bento layouts — named after Japanese lunch boxes — arrange content into grid cells of varying sizes. They create visual interest while keeping structure clear. Learning to describe cell spans and visual hierarchy gives you precise control over this modern layout pattern.
What Defines a Bento Layout
Section titled “What Defines a Bento Layout”A bento layout is a grid where cells have different sizes — some span multiple columns or rows to give important content more space. The key elements to specify:
- Grid foundation — e.g., 4×4 or 3×3 grid
- Cell span sizes — which items are 2×2, 1×1, 2×1, etc.
- Content per cell — image, text, stat, chart, or action
- Gap size — consistent spacing between all cells
- Mobile collapse — how it stacks on small screens
Bento Layout Templates
Section titled “Bento Layout Templates”Portfolio Homepage Bento
Section titled “Portfolio Homepage Bento”Design a bento grid layout for a portfolio homepage with a 4-column foundation:
- Featured project card (2×2): full project image with overlay title and brief description
- About me card (1×1): circular profile photo and 2-line bio
- Skills card (1×2): icon list of expertise areas
- Three smaller project cards (1×1 each): thumbnail with hover overlay showing project details
- Contact/social card (1×1): icon links to GitHub, Twitter, and email
Use 16px gaps between all cells and 12px border-radius throughout.
On mobile, collapse to a single column stacked in this order:
featured project → about me → skills → projects → contact.Metrics Dashboard Bento
Section titled “Metrics Dashboard Bento”Create a metrics dashboard with a bento layout:
- Top row: 4 small KPI cards (1×1 each) — one for revenue, users, orders, and conversion rate
- Middle: 1 large line chart (2×2) and 1 bar chart (2×1) side by side
- Bottom right: scrollable activity feed (2×1)
Use consistent card styling: white background, 1px light gray border, 8px radius, 16px padding.Content Showcase Bento
Section titled “Content Showcase Bento”Design a content showcase bento with:
- Featured article (2×2): full cover image with overlay headline and excerpt
- Newsletter signup sidebar (1×3): email input and subscribe button
- Two smaller article cards (1×1 each): thumbnail, title, and category tag
Gap: 12px. Cards: rounded corners (8px), subtle shadow.Product Features Bento
Section titled “Product Features Bento”Create a product features showcase with a 4-column bento grid:
- Top banner (4×1): headline, brief description, and illustration side by side
- Four feature cards (1×1 each) below: icon at top, feature title, 2-line description
Use a consistent color accent on each feature icon. Gap: 16px.Media Gallery Bento
Section titled “Media Gallery Bento”Design a media gallery bento with a 4-column grid:
- Main large image (3×2, top-left)
- Wide accent image (3×1, top-right stacked below main, spanning 3 columns)
- Two smaller images filling remaining cells (2×1 and 1×1)
On hover, each image shows an overlay with the image title and photographer name.Bento Design Principles
Section titled “Bento Design Principles”| Principle | How to apply in your prompt |
|---|---|
| Visual hierarchy | Give the most important item the largest cell (2×2 or wider) |
| Consistent spacing | Specify a single gap value used between all cells |
| Group related items | Place related content in adjacent cells |
| Mobile fallback | Always specify the stacking order for mobile |
| Balanced composition | Even with different sizes, the overall layout should feel balanced |
Tailwind CSS for Bento
Section titled “Tailwind CSS for Bento”Use CSS grid with Tailwind:
- grid grid-cols-4 gap-4 for the base layout
- col-span-2 row-span-2 for the featured cell
- col-span-1 for standard cells
- On mobile: grid-cols-1 with appropriate stacking order