Grid布局错位主因是约束条件被打破，须逐层验证：检查容器高度（1fr需min-height）、grid-template-areas在打印/旧浏览器中被静默丢弃、gap/fr在缩放/打印中失效、子项transform/overflow/width等破坏对齐。
Grid 布局错位不是代码写错了，而是某个约束条件在真实环境里被意外打破——必须逐层验证，不能靠“看起来像”去猜。
检查 grid 容器是否真有高度（尤其含 1fr 时）
常见现象：两行都设 1fr，但第二行内容塌成一条线，或整个网格“消失”。根源是容器没高度，1fr 失去计算基准。
- 用开发者工具看容器的
Computed Height，若为0px或远小于预期，说明它没撑开 - 给容器加
min-height: 100vh（非height: 100vh，避免父级无高时失效） - 若容器嵌在
flex或position: absolute父级中，检查父级是否设了height或min-height - IE11 下
1fr直接被忽略，此时grid-template-rows整条声明无效，需降级为像素值
确认 grid-template-areas 是否被浏览器静默丢弃
grid-template-areas 在打印、Safari ≤10.1、部分 Electron 内核中会被解析器直接跳过，不是“不生效”，而是根本没进样式引擎。
- 打开打印预览（
Cmd/Ctrl + P），观察布局是否退化为垂直堆叠块 —— 若是，说明命名区域已失效 - 检查模板字符串每行引号内单词数是否一致，如
"header header" "main"（第二行少一个）会导致整条规则被丢弃 - 子元素的
grid-area值必须与模板中字符串**完全一致**：大小写、空格、引号都不能有差异（grid-area: Header≠grid-area: header） - 打印场景下，必须放弃
grid-template-areas，改用grid-column: 1 / -1这类线号定位
排查 gap 和 fr 单位在缩放/打印/旧浏览器中的失效
gap 和 fr 是错位高发区，问题常不出现在开发环境，而是在用户开启字体缩放、打印或使用旧 iPad 时爆发。
立即学习“前端免费学习笔记（深入）”；
- 旧 Safari（≤10.1）、IE11 不支持
gap，需拆成grid-row-gap和grid-column-gap；Android 4.4 WebView 连这两个都不认，得 fallback 到margin - 字体缩放时，
minmax(2rem, 1fr)中的2rem会变大，但1fr仍按原始剩余空间分，比例崩坏 —— 统一改用px或minmax(48px, auto) - 打印时
fr计算极不稳定，可能为0px或撑满整页；gap会放大物理间距，把下一个 item 整体推到下一页 —— 打印样式中必须设gap: 0，用margin-bottom控制间距 - 检查是否混用了
fr和固定像素，如grid-template-columns: 200px 1fr 1fr，小数像素舍入可能导致视觉错位
验证子项是否被 transform / overflow / float 破坏对齐
Grid 子项一旦加了某些 CSS 属性，会脱离网格流的尺寸控制逻辑，导致“位置对了，但内容飘了”。
-
transform（如scale、rotate）不改变 layout 尺寸，但默认transform-origin: center与 grid 对齐基准不一致 —— 必须显式设place-items: center或补translate() -
overflow: hidden、position: absolute、float会让break-inside: avoid失效，打印时子项被切断 —— 打印样式中要清空这些声明 - 子项设了
width: 300px或white-space: nowrap，会强行撑开所在轨道，压缩其他fr列 —— 检查子项的min-width、max-width和文本换行行为 - 表格嵌在 Grid 里打印错乱？大概率是组件库设了
table-layout: fixed，打印引擎无法计算列宽 —— 改用table-layout: auto或导出为纯 div 结构
真正卡住的往往不是某一行 CSS 写错，而是 height 来源没理清、单位混用没察觉、打印和缩放场景被漏测。错位是信号，不是故障本身。
