CSS Grid 实现像素级 Cell 定位需显式命名网格线并用 grid-row/column 精确锚定，配合 minmax() 控制行高、vh/vmin 适配缩放、break-inside: avoid 处理分页，禁用 implicit grid flow。
用 CSS Grid 实现像素级 Cell 定位，不是靠 position: absolute
Keynote 的网格系统本质是「可声明式定位的二维坐标系」，每个 Cell 由行/列起止线精确锚定。CSS Grid 天然支持这个模型，但很多人误用 position: absolute 或 Flex 模拟，结果失去响应性、破坏语义、无法对齐轨道线。
正确做法是显式定义网格线名称 + 使用 grid-row/grid-column 指向具体线号或命名线：
- 先用
grid-template-rows和grid-template-columns定义带命名的轨道线，例如[top] 100px [content-top] 1fr [content-bottom] 100px [bottom] - Cell 元素设置
grid-row: content-top / content-bottom，而非grid-row: 2 / 3—— 命名线让意图清晰，且支持跨轨道合并（如grid-column: left / right） - 避免用
grid-area简写，它隐含四值顺序（row-start / column-start / row-end / column-end），易错；拆开写更可控
处理非等高 Cell：grid-auto-rows 与 minmax() 的取舍
Keynote 中不同 Cell 高度自由，但 Grid 默认轨道高度由内容撑开，导致相邻行错位。关键不是禁止自动增长，而是约束增长范围：
-
grid-auto-rows: minmax(200px, auto)表示每行至少 200px，内容超长时才扩展 —— 这比固定1fr更贴近 Keynote 的「弹性留白」行为 - 若需某行严格固定（如标题栏），单独用
grid-template-rows定义该行，其余用grid-auto-rows托管，避免所有行被强制统一 - 慎用
grid-auto-rows: 1fr：它会让所有隐式行均分剩余空间，破坏局部高度控制
缩放适配问题：不要在 html 上用 transform: scale()
Keynote 导出 PDF 或全屏演示时会整体缩放，但 Web 端硬套 transform: scale(0.8) 会导致字体模糊、事件坐标偏移、媒体查询失效。真实解法是结合视口单位与缩放感知：
- 根字号用
font-size: clamp(12px, 4vw, 16px)，让文字随容器缩放，而非整个 DOM 树 - Grid 轨道尺寸优先用
vh/vmin（如grid-template-rows: 10vh 80vh 10vh），再配合aspect-ratio控制 Cell 比例 - 监听
window.devicePixelRatio变化，动态调整body的zoom（仅限桌面端测试环境），生产环境改用scale()+transform-origin: top left并重置pointer-events区域
导出为 PDF 时 Grid 崩溃？用 @page + break-inside: avoid 强制分页
浏览器打印预览中 Grid 容器常被截断或重排，因为默认分页逻辑不理解网格上下文。必须显式干预分页边界：
立即学习“前端免费学习笔记（深入）”；
- 给每个幻灯片容器加
break-inside: avoid，阻止内部断行 - 在
@media print中重置grid-template-rows/columns为绝对单位（如297mmA4 高），禁用fr和百分比 - PDF 导出工具（如 Puppeteer）需启用
preferCSSPageSize: true，否则忽略@page { size: A4 }
网格线命名和 minmax() 组合是稳定性的核心，但最易被忽略的是：Grid 的「隐式网格区域」（implicit grid area）在未显式定义 grid-template-areas 时仍存在，它会悄悄接管未声明位置的元素 —— 务必用 grid-auto-flow: dense 显式表态，或直接设为 none 避免意外填充。
