grid错位源于轨道定义不清、单位混用或打印/缩放退化；后台页面因结构深、需适配高dpi和打印更易出问题，须显式声明grid-template-columns/rows并确保1fr有计算基准。
Grid 布局本身不会错位，错位是因轨道定义不明确、单位混用或打印/缩放场景下浏览器退化行为导致的——后台页面尤其容易踩坑，因为结构深、组件多、还要适配高 DPI 和打印。
grid-template-columns/rows 必须显式声明，不能靠 auto 或内容撑开
后台面板常见“侧边栏消失”“主内容塌成一条线”，根本原因是父容器没设高度，1fr 失去计算基准。IE11 甚至直接忽略 fr，回退为单列堆叠。
- 给 Grid 容器加
min-height: 100vh（不是height: 100%），确保1fr有参照 - 头部固定高：用
grid-template-rows: 64px 1fr，别写auto；若需弹性保底，改用minmax(64px, max-content) - 侧边栏固定宽：写
grid-template-columns: 240px 1fr，别用minmax(240px, 240px) 1fr—— Safari 对后者渲染不稳定 - 检查 computed style 中容器 height 是否生效，滚动条、
box-sizing、父级overflow都可能悄悄压缩可用空间
嵌套 Grid 必须独立声明 display: grid
很多人把 .main 区域划进 grid-template-areas，就以为里面自动是 Grid，结果卡片挤在一起——其实它只是普通块级流，没启用网格能力。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父级定义区域：
grid-template-areas: "header header" "nav main" "footer footer" - 子级区域（如
.main）必须自己写：display: grid; grid-template-areas: "top stats" "list list" - 漏掉
display: grid，grid-area在子级完全无效，浏览器当普通元素处理 - 子项对齐要单独控制：
justify-self: center或place-self: stretch，父级justify-items不继承
@media print 中 Grid 必须重写，不能微调
打印时 grid-template-areas、fr、gap 全部被忽略，元素退化为无序 block 堆叠——这不是你写错了，是浏览器打印引擎根本不解析这些语义。
- 放弃
fr：改用grid-template-columns: 100%或grid-template-rows: 120px 70%（前提是容器有固定height） - 禁用
gap：gap: 0，改用margin-bottom: 12px控制间距 - 用线号定位：
grid-column: 1 / -1（跨整行）、grid-row: 2（起始行），别写span 2 -
break-inside: avoid必须加在每个直接子项上（如.card），加在容器上无效；Safari 16.4 以下需降级为page-break-inside: avoid
字体缩放和 transform 动画会干扰 Grid 轨道计算
系统 DPI 调整或浏览器字体放大，会让 rem/em 基准偏移，若 grid-template-rows 里混用 2rem 1fr minmax(6rem, auto)，轨道比例当场失衡。
- Grid 结构层统一用
px或fr + minmax(绝对值, ...)，例如minmax(48px, auto) - 禁用
text-size-adjust: none—— 它不阻止系统缩放，还损害可访问性 - transform 元素（如旋转卡片）要设
transform-origin: center，并配合place-items: center，否则 grid 按原始盒模型对齐，视觉上“飘出去” - 含长文本的项加
line-height: 1.4（无单位）、overflow-wrap: break-word，防字体回退导致高度不一致
真正卡住的，往往不是 Grid 写法本身，而是没意识到不同上下文（打印、缩放、嵌套、动画）会触发浏览器完全不同的渲染路径——这些路径里，Grid 的语义要么被忽略，要么被截断，必须针对性重写，不能指望一套代码通吃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
