结论：别指望 autoprefixer 自动修好 Grid 兼容性，它对现代浏览器不加前缀，对 IE 也只加 display: -ms-grid，其余全不管；真正要解决的是显式约束 + 条件 fallback，而不是“加个前缀就完事”。
直接说结论：别指望 autoprefixer 自动修好 Grid 兼容性，它对现代浏览器不加前缀，对 IE 也只加 display: -ms-grid，其余全不管；真正要解决的是显式约束 + 条件 fallback，而不是“加个前缀就完事”。
Firefox 的 grid-template-areas 为什么会“塌陷”？
Firefox 对空单元格更严格——遇到纯空白或空字符串（比如 "header header " 结尾多一个空格），会跳过整行/列，压缩隐式网格线；Chrome 则保留占位，导致同一模板在 Firefox 中行数变少、grid-area 定位偏移。
- 必须每行长度一致，用
.显式占位空区域："header header ."、"main main sidebar"、"footer footer ." - 避免混用换行符（
\r\nvs\n），旧版 Firefox 可能把\r当非法字符丢弃整行 - 别依赖预处理器拼接多行字符串——Babel 或 PostCSS 插件可能破坏原始换行结构，建议手写或用 JS 模板字面量校验输出
minmax(0, 1fr) 在 Chrome 和 Firefox 下行为完全不同
这不是 bug，是规范留白导致的实现分歧：minmax(0, 1fr) 在 Firefox 中被解释为“最小宽度 0px”，但受 min-width: auto 影响仍可能撑开；Chrome 实际按类似 minmax(min-content, 1fr) 处理，列宽容易突变。
- 真需“可缩至零”，改用
minmax(0px, 1fr)（注意单位）或minmax(max-content, 1fr)控制下限 - 若用于 flex/grid 混合布局，还要警惕 Safari 旧版本（iOS 16.4 之前）的 bug，稳妥起见可用
minmax(1px, 1fr)+overflow: hidden
隐式网格轨道（grid-auto-rows）尺寸不一致怎么锁定？
子项超出显式网格时，浏览器自动生成隐式轨道。Chrome 默认用 auto，Firefox 默认用 min-content，动态插入内容时高度抖动明显。
立即学习“前端免费学习笔记（深入）”；
- 显式设置
grid-auto-rows: minmax(40px, auto)或grid-auto-rows: 1fr，禁用不确定性 - 如果用了
grid-auto-flow: column，必须配grid-auto-columns，否则 Firefox fallback 到auto，Chrome 可能用min-content - 关键子项务必用
grid-row-start/grid-column-start显式控制位置，否则重排顺序在两浏览器中可能不同
IE11 和旧版 Safari 根本不认现代 Grid 语法
IE11 只支持 2012 草案版，不认识 gap、fr、grid-template-areas；Safari ≤10.1 / iOS ≤15.3 会静默丢弃 grid-template-areas，row-gap/column-gap 完全无效。
- IE11 必须手写
display: -ms-grid+-ms-grid-column/-ms-grid-row，且-ms-grid-columns中2fr不被支持，得换算成百分比 - Safari ≤10.1 只认合写的
gap，不认row-gap或column-gap；grid-template-areas必须彻底移除，改用数字线定位（如grid-column: 1 / -1） -
@supports (display: grid)在 IE11 中无效，它会直接跳过整个块——所以 fallback 必须写在@supports外层，用display: flex或float降级
真正麻烦的不是单个差异，而是多个因素叠加时才暴露：比如 grid-template-areas + grid-auto-rows: auto + 动态 DOM 插入。上线前一定要用真实设备录屏比对滚动过程中的重排，光看静态截图根本发现不了问题。
