Firefox 中 grid-template-areas 会“塌陷”是因为它对空单元格（如空字符串或纯空白）更严格，跳过对应行列并压缩隐式网格线；Chrome 则保留占位，导致同一模板在 Firefox 中行数减少、定位偏移。
Firefox 和 Chrome 对 grid-template-areas、minmax() 和隐式轨道的处理不一致，直接导致布局错位——这不是 bug，是规范留白 + 浏览器实现策略不同造成的，必须靠显式约束来统一行为。
为什么 grid-template-areas 在 Firefox 里会“塌陷”？
Firefox 对未显式声明的命名区域（尤其是空字符串或仅含空白符的单元格）更严格：它会跳过该行/列，压缩隐式网格线；Chrome 则倾向于保留占位。结果就是同一段模板在 Firefox 中行数变少，后续 grid-area 定位偏移。
- 确保每个
grid-template-areas行长度一致，用.显式占位空区域，例如："header header .""main main sidebar""footer footer ." - 避免换行符混用（Windows
\r\nvs Unix\n），某些旧版 Firefox 会把\r当作非法字符丢弃整行 - 不要依赖 CSS 预处理器自动拼接多行字符串——Babel 或 PostCSS 插件可能破坏原始换行结构，建议手写或用模板字面量校验输出
minmax(0, 1fr) 在 Chrome 和 Firefox 下表现完全不同
minmax(0, 1fr) 是常见“弹性最小宽度”写法，但 Firefox 将 0 解释为绝对禁止收缩（即强制至少 0px，但受 min-width: auto 影响仍可能撑开），而 Chrome 实际按 minmax(min-content, 1fr) 类似逻辑处理，导致列宽突变。
- 改用
minmax(min-content, 1fr)或minmax(max-content, 1fr)，语义明确且双端一致 - 若真需“可缩至零”，用
minmax(0px, 1fr)——加单位后 Firefox 才按数值解析，Chrome 也兼容 - 注意
0px在 flex/grid 混合布局中可能触发 Safari 的旧 bug（已修复于 iOS 16.4+），如需兼容更老版本，改用minmax(1px, 1fr)并配合overflow: hidden
隐式网格轨道（implicit grid）尺寸不一致怎么锁定？
当子项超出显式网格范围时，浏览器自动生成隐式行/列轨道。Chrome 默认用 auto，Firefox 默认用 min-content，这导致跨浏览器高度/宽度抖动，尤其在动态插入内容时明显。
立即学习“前端免费学习笔记（深入）”；
- 显式设置
grid-auto-rows: 1fr或grid-auto-rows: minmax(40px, auto)，禁用隐式行为的不确定性 - 避免只设
grid-auto-flow: column却不配grid-auto-columns——Firefox 会 fallback 到auto，Chrome 可能用min-content - 如果用
grid-auto-flow: dense，务必搭配grid-row-start/grid-column-start显式控制关键项位置，否则重排顺序在两浏览器中可能不同
真正麻烦的不是差异本身，而是这些行为只在特定组合下才暴露：比如 grid-template-areas + grid-auto-rows: auto + 动态 DOM 插入。上线前用真实设备录屏比对滚动过程中的重排，比单纯看静态快照更能发现隐患。
