Bento Grid new 便当网格（Bento Grid） web
One grid, mixed tile sizes — a layout packed like a bento box
一个网格，大小不一的格子 —— 像便当盒一样紧凑分装的布局
Revenue
$48.2k
Users
2.4k
Growth
↑ 12%
+9 signups today
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Spanning tile跨格卡片（Spanning tile）
grid-column: span 2“The one big box among the small ones” is a spanning tile — a normal grid item told to take two columns and/or two rows.
“小盒子中间那个大盒子”就是跨格卡片 —— 一个普通的 grid item，被告知要占两列和/或两行。
Prompt fragmentPrompt 片段the bento grid's spanning tile: a grid item with grid-column: span 2 and grid-row: span 2 so it occupies a 2×2 block among single-cell tiles
bento 网格的跨格卡片：一个带 grid-column: span 2 和 grid-row: span 2 的 grid item，在单格卡片之间占据一个 2×2 区块
-
2 Gap (gutter)网格间距（Gap/gutter）
gap“The even spacing between all the boxes” is the grid's gap — one value, never per-tile margins, which is why a bento looks machine-packed.
“所有盒子之间均匀的间距”就是网格的 gap —— 一个值统管，绝不用逐卡片 margin，所以 bento 才有机器打包般的整齐感。
Prompt fragmentPrompt 片段the bento grid's gap: a single CSS gap value on the grid container providing every gutter, with no margins on the tiles themselves
bento 网格的 gap：grid 容器上的单个 CSS gap 值提供所有缝隙，卡片本身不设 margin
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Build a bento grid: one CSS grid (display: grid; grid-template-columns: repeat(4, 1fr); one consistent gap) where feature tiles span multiple cells via grid-column: span 2 / grid-row: span 2, every tile shares the same corner radius and an opaque background, and the whole composition reads as a single rounded box of differently sized compartments.
构建一个 bento 网格：一个 CSS grid（display: grid; grid-template-columns: repeat(4, 1fr)；全网格统一 gap），特性卡片通过 grid-column: span 2 / grid-row: span 2 跨多个单元，所有卡片用同一个圆角半径和不透明背景，整体读起来像一个大圆角盒子里装着大小不一的隔间。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my bento grid (CSS grid with spanning tiles). Rule out: holes in the grid because a span exceeds the remaining columns in its row (consider grid-auto-flow: dense, noting it reorders visually vs DOM); uneven gutters from per-tile margins instead of the grid's single gap; tiles with different corner radii or translucent backgrounds breaking the lunchbox look; the hero tile collapsing on small screens because the span isn't reduced under a media query. The symptom:
调试我的 bento 网格（带跨格卡片的 CSS grid）。逐项排除：某行的跨格超出剩余列数，网格出现空洞（可考虑 grid-auto-flow: dense，注意它会让视觉顺序和 DOM 顺序不一致）；用了逐卡片 margin 而不是网格统一的 gap，缝隙宽窄不一；卡片圆角各异或背景半透明，破坏了便当盒的整体感；小屏幕上主卡片塌掉，因为 media query 里没把 span 减小。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| CSS | display: grid + grid-column: span 2 | spanning cells are what make a grid a bento正是跨格的单元让普通网格变成 bento |
| CSS | grid-template-columns: repeat(4, 1fr) | the fixed track skeleton the spans play against跨格赖以发挥的固定轨道骨架 |
| CSS | grid-template-areas | name the tiles instead of counting spans给格子命名，省去数跨格 |
| Tailwind | col-span-2 row-span-2 |