firefox 62起已移除-ms-grid前缀支持，若代码中仍存在display: -ms-grid等声明，网格会退化为block导致布局错位；fr单位在无宽容器中坍缩、auto-fit少一列、gap失效等问题均源于firefox对css grid的严格计算逻辑与保守判定机制。
确认是否真在用旧版Firefox
Firefox 62（2018年10月发布）起已完全移除 -ms-grid 前缀支持，若代码里还留着 display: -ms-grid 或 -ms-grid-columns，整个网格会退化为 display: block，所有布局错位都是必然结果。打开开发者工具 → Elements → Computed 标签页，看 display 的最终值是不是 grid；如果是 block，问题就在这儿。
别猜“用户可能用了旧版”——先查 UA 字符串或直接用 navigator.userAgent.includes('Firefox/61') 判断。2026 年还在用 Firefox ≤61 的环境，基本只存在于内网隔离系统或嵌入式设备，修复优先级应让位于升级浏览器本身。
fr 单位在无宽容器中坍缩的典型表现
Firefox 对 fr 的计算严格依赖容器的可测量内联尺寸。若 Grid 容器是 flex 子项、position: absolute 元素，或父级设了 min-width: fit-content，fr 就会回退为 0px，整列消失或挤成一条线。
- 给容器加
width: 100%或max-width: 100%，尤其在 flex 布局嵌套场景下 - 避免混写
1fr minmax(300px, 1fr)—— Firefox 可能触发两次重排，改用1fr minmax(300px, 2fr) - 检查父级是否意外设置了
overflow: hidden或contain: layout，这两者会截断 Firefox 对可用空间的测量
auto-fit 在 Firefox 中少一列的根因
repeat(auto-fit, minmax(250px, 1fr))) 在 Firefox 下常比 Chrome 少生成一列，不是 bug，是它对“可用空间”的判定更保守：它要求容器宽度 ≥ 单个 minmax() 最小值 × 1 才开始生成轨道，而 Chrome 可能提前生成并留空。
可靠解法不是调参数，而是绕过判定逻辑：
- 把
auto-fit换成auto-fill，后者不收缩轨道数，只控制填充行为 - 追加 Firefox 特供规则：
@supports (-moz-appearance: none) { .grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))); } } - 加保底声明：
grid-auto-columns: 250px，防止极端缩放时轨道全丢
gap 失效却查不到报错的隐藏冲突
gap: 12px 在 Firefox 中看似没生效，但控制台无报错——大概率是和 align-content 或 column-gap 同时存在。Firefox 会静默忽略 gap，转而用后声明的 column-gap 或被 align-content: stretch 干扰导致行间隙压缩。
- 删掉所有
align-content声明，或显式设为align-content: normal - 统一用
row-gap和column-gap替代gap，避免歧义 - 确认父容器没设
overflow: hidden—— 它会裁剪 gap 区域，视觉上就像 gap 消失
真正麻烦的是组合态问题：比如 grid-template-areas 里混用空格与点号、又配了 grid-auto-rows: auto，再叠加上动态插入 DOM —— 这种情况 Firefox 和 Chrome 渲染差异会随内容长度变化而浮动，静态截图根本看不出，必须在真实滚动操作中录屏比对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
