Firefox中CSS Grid异常需分步排查：先验证display计算值是否为grid，禁用-ms-grid前缀；fr单位失效时需设容器宽度或调整轨道定义；auto-fit/fill列数异常应检查父容器overflow/contain并加Firefox特供规则；gap失效需用row/column-gap显式声明并避免overflow裁剪；Grid Inspector仅在Developer Edition可用且需手动启用。
Firefox浏览器中CSS Grid布局显示异常，比如网格项错位、fr单位计算偏差、auto-fit/auto-fill行为不同、gap属性失效或重叠，这类问题常因引擎差异和规范实现节奏不一导致。
确认Grid容器display属性是否生效
打开开发者工具 → 元素面板 → 查看Computed标签页，确认display计算值确实是grid。如果显示为block，说明样式被覆盖或语法错误。
检查CSS规则中是否误用了过时前缀，例如display: -ms-grid——Firefox从62版起已完全移除对旧版IE网格前缀的支持，【若误用会导致整个Grid失效，退化为普通块级流】。
确保声明的是display: grid或display: inline-grid，不能写成display: "grid"或display: gridd这类拼写错误。
立即学习“前端免费学习笔记（深入）”；
修复fr单位在Firefox中计算失效的问题
Firefox要求Grid容器必须有可测量的内联尺寸才能正确分配fr，若父元素是flex子项、绝对定位元素或min-width: fit-content容器，fr可能回退为0px，造成列坍缩。
方法一：显式设置容器宽度
给Grid容器添加width: 100%或max-width: 100%，尤其当它位于弹性布局子项或绝对定位上下文中时。
方法二：避免在fr轨道中混用百分比与minmax()
例如grid-template-columns: 1fr minmax(300px, 1fr)在Firefox中可能触发两次重排；改用grid-template-columns: 1fr minmax(300px, 2fr)可稳定行为。
解决auto-fit与auto-fill在Firefox中列数异常
Firefox对可用空间判定更保守，会把父容器padding、border甚至box-sizing差异计入不可用空间，导致列数比预期少一列。
- 确认容器父级未设overflow: hidden或contain: layout——这两者会干扰Firefox对可用空间的测量，导致auto-*重复数为0。
- 用@supports (display: grid)包裹Grid规则，并追加针对Firefox的修正：
@supports (-moz-appearance: none) { .grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))); } } - 手动设定最小轨道数保底：添加grid-auto-columns: 250px，防止Firefox在极端缩放下完全丢弃轨道。
排查gap属性在Firefox中不生效
Firefox支持gap: 12px，但若同时设置了align-content或column-gap，可能触发冲突导致gap被忽略。
稳妥写法是显式声明row-gap和column-gap：
row-gap: 12px; column-gap: 12px;
若父容器设了overflow: hidden，gap产生的物理间距可能被裁剪，看起来像“失效”——此时应移除overflow: hidden或改用padding模拟间隙。
强制启用Firefox Developer Edition的Grid Inspector
打开目标网页 → 右键任一疑似grid容器的元素 → 选择“检查元素” → 在右侧“规则”面板中找到display: grid声明 → 点击该声明行末尾的?图标（Grid图标）→ 网页上立即叠加半透明网格线。
若?图标不出现，先确认使用的是Firefox Developer Edition（非ESR或Release版），并在about:support中查看“应用程序”名称字段；【Windows 8.1及更低系统将无法启用Grid Inspector】。
切换到右侧面板的“布局”标签页 → 找到下方“Grid”区域 → 勾选“Overlay Grid”复选框 → 若页面存在多个grid容器，每个都会列出并可单独开关。
