firefox中display: grid未生效，大概率因规范执行更严格：需确保display计算值确为grid（非block或被覆盖），fr单位要求容器有可测量内联尺寸，auto-fit在firefox中可用空间判定更保守。
display: grid 在 Firefox 中没生效，大概率不是写错了，而是它对规范的执行更严格——Chrome 容忍的模糊写法，Firefox 会直接跳过。
确认 display 值是否被真正解析为 grid
Firefox 不会把 display: -ms-grid、display: block（哪怕只有一条覆盖规则）或未声明的 display 当作 Grid 容器。它要求明确、未被覆盖、且无语法错误。
- 打开开发者工具 → 元素面板 → Computed 标签页，查
display的最终计算值；若显示block或空，说明 Grid 没启动 - 检查是否有
!important覆盖了display: grid，或父级用了display: contents导致子元素脱离渲染树 - 避免在同一个选择器里混写
display: grid和display: -ms-grid，IE 会忽略后者，Firefox 则可能因语法错误整条规则失效
fr 单位在 Firefox 中回退为 0 的真实原因
fr 在 Firefox 中不是“算不准”，而是“没得算”——它要求容器有可测量的内联尺寸（inline size），否则直接按 0 处理，列就坍缩了。
- 给 Grid 容器加
width: 100%或max-width: 100%，尤其当它位于flex子项、position: absolute或min-width: fit-content父级中时 - 避免在
grid-template-columns中混用fr和minmax()的非常规组合，例如1fr minmax(300px, 1fr)可能触发两次重排；改用1fr minmax(300px, 2fr)更稳 - 如果父级用了
box-sizing: border-box，确保 Grid 容器也继承或显式设置，否则 Firefox 对 padding 的空间扣除更激进
auto-fit / auto-fill 在 Firefox 中生成轨道数为 0 怎么办
Firefox 对 auto-fit 的可用空间判定比 Chrome 保守得多：只要它认为容器宽度 minmax() 最小值 × 1，就会返回 0 条轨道——不是 bug，是规范实现差异。
- 先确认父级没设
overflow: hidden或contain: layout，这两者会截断 Firefox 的空间测量逻辑 - 用
@supports (-moz-appearance: none)单独追加修正规则，比@supports (display: grid)更可靠（Firefox 识别该伪类且稳定） - 优先换用
auto-fill，它在 Firefox 中收缩逻辑更宽松；同时加保底：grid-auto-columns: 250px，防止极端缩放时轨道全丢
gap 属性在 Firefox 中看似生效但实际错位
Firefox 支持 gap，但它和 align-content、column-gap 混用时容易冲突，尤其当网格项高度不一致或存在隐式行时。
- 显式拆开写：
row-gap: 12px+column-gap: 12px，而非依赖gap: 12px简写 - 如果用了
grid-auto-flow: column，Firefox 对row-gap的应用顺序更敏感；可临时加grid-auto-rows: min-content强制行高对齐 - 检查是否同时设置了
justify-content: center和gap——Firefox 会先居中再加 gap，可能导致整体偏移；改用margin模拟 gap 更可控
fr，或依赖 auto-fit 在无宽容器中猜尺寸。这些地方不加锚点、不设保底、不验证计算值，就等于把布局交给浏览器猜。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
