ppt-agent-skill/references/bento-grid.md

Bento Grid 布局系统

画布参数

固定画布: width=1280px, height=720px
标题区: x=40, y=20, w=1200, h=50
内容区: x=40, y=80, w=1200, h=580
卡片间距: gap=20px
卡片圆角: border-radius=12px
卡片内边距: padding=24px

CSS Grid 实现

所有布局通过 CSS Grid 精确实现。内容区容器统一定义：

.content-area {
  position: absolute;
  left: 40px; top: 80px;
  width: 1200px; height: 580px;
  display: grid;
  gap: 20px;
}

页面类型布局

封面页 (cover)

• 大标题居中或左对齐, font-size=48-56px, accent-primary 色
• 副标题 font-size=24px
• 演讲人/日期/公司 底部小号文字 font-size=16px
• 装饰: 品牌色块、几何线条、配图（渐隐融合技法）
• 不使用 Bento Grid，自由排版

目录页 (toc)

• 2-5 个等大卡片网格

卡片数	grid-template-columns	单卡尺寸
2	1fr 1fr	590x540
3	repeat(3, 1fr)	387x540
4	1fr 1fr / 1fr 1fr (2x2)	590x260
5	repeat(3, 1fr) / repeat(2, 1fr) (3+2)	混合

章节封面 (section)

• "PART 0X" font-size=20px, accent-primary, letter-spacing=2px
• 标题 font-size=44px, font-weight=700
• 导语 font-size=18px, color=text-secondary
• 大量留白，营造呼吸感
• 不使用 Bento Grid，居中排版

结束页 (end)

• 标题 font-size=44px 居中
• 核心要点 3-5 个, font-size=18px
• 联系方式/CTA 底部

---

7 种内容页布局

所有基于内容区 (1200x580px, 起始坐标 40,80)。

1. 单一焦点

适用: 1个核心论点/大数据全屏展示

.content-area { grid-template: 1fr / 1fr; }
/* 卡片: 1200x580 */

2. 50/50 对称

适用: 对比、并列概念

.content-area { grid-template: 1fr / 1fr 1fr; }
/* 左: 590x580 | 右: 590x580 */

3. 非对称两栏 (2/3 + 1/3)

适用: 主次关系。最常用的布局。

.content-area { grid-template: 1fr / 2fr 1fr; }
/* 主: 790x580 | 辅: 390x580 */

4. 三栏等宽

适用: 3个并列比较

.content-area { grid-template: 1fr / repeat(3, 1fr); }
/* 卡1: 387x580 | 卡2: 387x580 | 卡3: 386x580 */

5. 主次结合 (大 + 两小)

适用: 层级关系。推荐：信息层次丰富时优先选择。

.content-area { grid-template: 1fr 1fr / 2fr 1fr; }
/* 主: 790x580 (span 2 rows) | 辅1: 390x280 | 辅2: 390x280 */

主卡片需设置 grid-row: 1 / -1; 跨两行。

6. 顶部英雄式

适用: 总分关系。推荐：总分结构清晰时优先选择。

3子项版（最常用）：

.content-area { grid-template: auto 1fr / repeat(3, 1fr); }
/* 英雄: 1200x260 (span 3 cols) | 子1-3: 387x300 */

4子项版：

.content-area { grid-template: auto 1fr / repeat(4, 1fr); }
/* 英雄: 1200x260 (span 4 cols) | 子1-4: 285x300 */

2子项版：

.content-area { grid-template: auto 1fr / 1fr 1fr; }
/* 英雄: 1200x280 (span 2 cols) | 子1-2: 590x280 */

英雄卡片需设置 grid-column: 1 / -1; 跨所有列。

7. 混合网格

适用: 高信息密度, 4-6个异构块。推荐：信息密度最高时优先选择。

2x3 网格：

.content-area { grid-template: repeat(3, 1fr) / 1fr 1fr; }
/* 6个卡片: 各 590x180 */

可通过 grid-row/grid-column 的 span 让个别卡片跨行/跨列，形成大小混搭效果。

关键约束: 所有卡片不得超出内容区边界（x+w<=1240, y+h<=660），间距>=20px，禁止重叠。

---

布局决策矩阵

内容特征	推荐布局	卡片数
1 个核心论点/数据	单一焦点	1
2 个对比/并列	50/50 对称	2
主概念 + 补充	非对称两栏	2
3 个并列要素	三栏等宽	3
1 核心 + 2 辅助	主次结合	3
综述 + 3-4 子项	顶部英雄式	4-5
4-6 异构块	混合网格	4-6

选择优先级：避免"单一焦点"（除非确实只有一个全屏内容）。内容>=3块时，优先选择主次结合/英雄式/混合网格。

---

6 种卡片内容类型

text（文本卡片）

• 标题: h3, 18-20px, 700 weight
• 正文: p, 13-14px, line-height 1.8
• 关键词用 <strong> 或 <span class="highlight"> 高亮
• 最低要求: 标题 + 至少 2 段正文（每段 30-50 字）

data（数据卡片）

• 核心数字: 36-48px, 800 weight, accent 色
• 单位/标签: 14-16px, text-secondary
• 补充解读: 13px
• 推荐搭配一个 CSS 可视化（进度条/对比柱/环形图）
• 最低要求: 核心数字 + 单位 + 趋势 + 解读 + 可视化

list（列表卡片）

• 圆点: 6-8px 圆点, accent 色
• 文字: 13px, line-height 1.6
• 交替使用不同 accent 色圆点增加层次感
• 最低要求: 至少 4 条列表项，每条 15-30 字

tag_cloud（标签云）

• 容器: flex-wrap, gap=8px
• 标签: 圆角胶囊形, 12px, accent 色边框
• 最低要求: 至少 5 个标签

process（流程卡片）

• 节点: 32px 圆形, accent 色, 居中步骤数字
• 连线: 真实 <div> 元素（禁止 ::before/::after）
• 箭头: 内联 SVG <polygon>（禁止 CSS border 三角形）
• 最低要求: 至少 3 个步骤，每步标题 + 一句描述

data_highlight（大数据高亮区）

• 用于封面或重点页的超大数据展示
• 数字: 64-80px, 900 weight, accent 色
• 副标题 + 补充数据行
• 最低要求: 1 个超大数字 + 副标题 + 补充数据行