firefox中grid-template-rows未显式声明会导致行高被最高内容撑开，因浏览器严格按规范执行：若该值为none或auto，则align-items: stretch失效；必须显式设置grid-template-rows（如1fr或repeat()），并确保容器有width/height上下文，子项加min-height: 0防内部flex阻断拉伸。
Firefox中grid-template-rows未显式声明导致行高被内容撑开
Firefox不会像Chrome那样“宽容”地默认拉伸行高——只要grid-template-rows是none或auto，它就完全按子项最高内容决定行高，align-items: stretch形同虚设。
打开DevTools → Computed → 查gridTemplateRows：若值为空或auto，说明你没锚定行高，此时所有“等高”预期都会落空。
- 单行等高：用
grid-template-rows: 1fr（容器需有height或min-height） - 固定行数（如4张卡片）：
grid-template-rows: repeat(4, 120px) - 响应式动态行：
grid-template-rows: repeat(auto-fit, minmax(200px, 1fr)))，但必须配合width: 100%（Firefox需要这个尺寸锚点） - 避免只写
grid-auto-rows: 1fr——它只管隐式行，对显式定义的行无效
子项内部布局阻断stretch行为
即使grid-template-rows设了1fr，Firefox仍可能让某一行“塌陷”或“凸起”，根源常在子项自身：嵌套display: flex或display: grid会默认带min-height: auto，直接卡住外部拉伸。
典型表现：卡片DOM高度一致，但按钮沉底、文字没填满、图片溢出——不是Grid没生效，是子项拒绝收缩。
- 给所有Grid直接子元素（即
.grid > .item）加min-height: 0 - 若子项内有flex容器，那个flex容器也得加
min-height: 0 - 图片必须设
height: 100%+object-fit: cover，否则原始尺寸参与计算 - 卡片内部推荐
display: flex; flex-direction: column;，描述区用flex: 1吸底
align-self和height设置悄悄关闭stretch
align-items: stretch在Firefox里极其脆弱：任意一个子项写了align-self: start、height: 200px或max-height: 300px，整行就会退出拉伸队列，高度由剩余“听话”的项决定。
调试时别猜——选中一个“矮卡片”，看Computed里的align-self是否为auto，height和max-height是否仍为auto。
- 批量重置：
.grid > * { align-self: stretch; }比依赖继承更可靠 - 删掉所有子项上的
height和max-height；min-height可保留，但别设具体数值（如min-height: 200px） - 若需最小高度保障，用
min-height+overflow: hidden组合，而非硬卡height
Firefox对fr单位的尺寸依赖更严格
Firefox要求Grid容器必须有**可测量的内联尺寸**才能正确分配fr，否则1fr会退为0px或auto，造成行坍缩。这在弹性布局子项、绝对定位上下文、或父级用了min-width: fit-content时尤其明显。
- 显式加
width: 100%或max-width: 100%到Grid容器 - 避免在
fr轨道中混用百分比与minmax()，例如grid-template-rows: 1fr minmax(100px, 1fr)可能触发两次重排；改用1fr minmax(100px, 2fr) - 若容器位于
display: flex子项中，确保父flex容器设了flex-basis: auto或明确宽度
Firefox里行高问题从来不是“样式没生效”，而是它严格执行规范细节——你漏掉的那个width、那个min-height: 0、那条被覆盖的align-self，就是它拒绝妥协的边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
