Bento 网格
Bento Grid
大小不一的方块拼成一整块，边线对齐，主次一眼分得清。
- 又叫：
- 便当盒布局
- 便当网格
- 大小格拼贴
- bento layout
- bento box grid
- feature grid
- 展厅
- 布局与结构
- 形态
- 固定舞台
- 播放
- 手动触发
- 关键词
- 纯 CSS / 可以直接用
参数工作台
复制给 AI
随参数实时更新做一个 Bento 网格首页：CSS grid，4 列，grid-auto-rows: 46px，gap: 8px，格子圆角 14px。用 grid-column: span 与 grid-row: span 混排 1×1、2×1、2×2 三种尺寸，让主图占 2×2、指标和快捷入口占小格，所有边缘对齐同一条列线。窄屏降到 2 列，跨格跟着重算，别留空边。
bento grid layout, CSS grid, grid-template-columns: repeat(4, minmax(0, 1fr)), grid-auto-rows: 46px, gap: 8px, tiles with grid-column: span / grid-row: span mixing 1x1 2x1 2x2 sizes, border-radius: 14px, all edges aligned to the same column lines, collapse to 2 columns on mobile
https://publieople.github.io/design-museum/entry/bento-grid/?stage=light
链接带着你调好的参数
什么时候用
- 首页或仪表盘，几块功能有大小之分，想用版式直接排出主次
- 一屏里同时要塞下一张主图、几个指标和若干快捷入口
- 产品介绍页用一块拼贴代替一长串等大的卡片列表
适用场景：页面 / 卡片
推荐取值
- 列数
- 4 列（桌面）/ 2 列（移动）
- 行高
- 48–72px
- 格子间距
- 8–16px
- 跨格
- 1×1 / 2×1 / 2×2 三种就够
- 圆角
- 14–20px
别搞混
和「瀑布流」的区别
瀑布流每列各自独立、卡片高度随便，列与列不共享行线；bento 网格有统一的行高和列线，每块只是跨几格，所有边缘必须对齐。
容易混的去看「瀑布流」
和「等分网格」的区别
等分网格每块一样大，没有主次；bento 靠 2×2、2×1 这类跨格把视觉重量拉开。
容易踩的坑
- 跨格数量要和列数匹配：4 列的网格里放 span 3 会留出一条尴尬的空边，改列数时跨格要跟着重算
- 所有格子一样大就退化成普通网格，bento 的看点就是有大有小
- 自动排布默认不回头填空洞（grid-auto-flow: row），想要紧凑可以设 dense，但那会打乱视觉顺序
- 行高写死后，格子里文字一多就溢出，宁可加行高也别裁字
无障碍降级
bento 是静态版式，本身不播动画；给格子加入场或 hover 效果时，prefers-reduced-motion: reduce 下只保留透明度变化。
关键词
- CSS grid
- grid-column: span
- grid-row: span
- grid-auto-rows
- grid-template-areas
- dashboard layout