Firefox 对 CSS Grid 规范执行更严格，Chrome 容忍的写法在 Firefox 中会跳过或回退为 block；需确认 display 计算值是否为 grid，排查 -ms-grid、!important 覆盖、display: contents 父级影响，fr 单位需容器有可测量 inline size，避免混用 1fr 与 minmax(300px, 1fr)，注意 box-sizing 继承及 auto-fit 可用空间判定差异。
Firefox 中 CSS Grid 显示异常，不是“偶尔不准”，而是它对规范执行更严格——Chrome 容忍的写法，Firefox 直接跳过或回退为 block。先确认是否真启动了 Grid，再针对性修。
确认 display 计算值确实是 grid
打开开发者工具 → 元素面板 → Computed 标签页，查 display 的最终值。若显示 block 或为空，说明 Grid 没生效。
- 检查是否误写了
display: -ms-grid：Firefox 62+ 已彻底移除支持，整条规则会被丢弃，退化为block - 排查
!important覆盖：比如某处写了display: block !important，会直接压掉display: grid - 注意
display: contents父级：它会让子元素脱离渲染树，Grid 容器若在其中，display值可能不参与计算
修复 fr 单位坍缩为 0 的问题
fr 在 Firefox 中不是“算错”，是“没得算”——它要求容器有可测量的内联尺寸（inline size），否则直接按 0 处理，列就消失了。
- 给 Grid 容器加
width: 100%或max-width: 100%，尤其当它是flex子项、position: absolute元素，或父级设了min-width: fit-content时 - 避免混用
1fr minmax(300px, 1fr)：Firefox 可能触发两次重排；改用1fr minmax(300px, 2fr)更稳定 - 检查父级
box-sizing：若父级是border-box但 Grid 容器没继承，Firefox 对 padding 的空间扣除更激进
解决 auto-fit 在 Firefox 中少一列
Firefox 对可用空间判定更保守：只要它认为容器宽度 minmax() 最小值 × 1，就会返回 0 条轨道。这不是 bug，是实现差异。
立即学习“前端免费学习笔记（深入）”；
- 确认父容器没设
overflow: hidden或contain: layout：这两者会截断 Firefox 的空间测量逻辑 - 优先换用
auto-fill：它不收缩轨道数，只控制填充行为，Firefox 支持更宽松 - 追加 Firefox 特供规则：
@supports (-moz-appearance: none) { .grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))); } } - 手动保底：
grid-auto-columns: 250px，防止极端缩放时轨道全丢
让 gap 在 Firefox 中真正生效
Firefox 支持 gap: 12px，但和 align-content、隐式行混用时容易冲突，导致视觉错位或失效。
- 显式拆开写：
row-gap: 12px+column-gap: 12px，别依赖简写gap - 检查是否设了
overflow: hidden：它会裁剪 gap 产生的空白区域，造成“gap 没效果”的假象 - 避免和
margin混用：比如 Grid 容器设了gap: 12px，又给子项加margin-bottom: 8px，Firefox 中可能叠加出意外留白
最常被忽略的是：Firefox 的 Grid Inspector 在普通版浏览器中默认不可用，Developer Edition 里也需手动开启 devtools.gridinspector.enabled；不亲眼看到网格线，很多“看起来正常”的布局其实轨道已错位。
