1fr 无效果的根本原因是容器缺乏高度上下文，需确保 html→body→各父级均设 height: 100% 或具体值，并在 grid 子项及内部 flex 容器上设 min-height: 0 以释放拉伸空间。
grid-template-rows: 1fr 没效果，先看容器有没有高度上下文
直接原因是 1fr 分配的是“可用空间”，而可用空间为 0 —— 容器本身高度没被约束。浏览器不会凭空造出高度来分。
常见错误现象：grid-template-rows: 1fr 写了，但子项高度只有内容那么高，甚至塌缩成一条线。
- 检查
Computed面板里 grid 容器的height是不是auto；如果是，说明某层父级没传下高度 - 必须确保从
html→body→ 所有中间容器，都显式设了height: 100%或具体值（如min-height: 400px） - 避免父级用了
display: inline、float或display: table-cell，这些会破坏包含块，导致百分比高度失效 -
100vh虽快但有坑：iOS Safari 地址栏变化时重算，嵌套在滚动区里会溢出，慎用于非顶层容器
子项内部 Flex 布局不撑开，重点查 min-height: 0
Grid 子项默认有 min-height: auto，它会阻止内部 Flex 容器拉伸填满轨道 —— 即使你写了 flex: 1，父级没放行，Flex 就无空间可分。
典型表现：Grid 单元格设了 grid-template-rows: 1fr，里面 display: flex; flex-direction: column;，但按钮沉底失败，文字区域没占满剩余空间。
- Grid 子项（即 Flex 容器的直接父元素）必须加
min-height: 0 - Flex 容器自身也要加
min-height: 0（Chrome 下尤其关键，否则会被align-items: stretch干扰） - 如果 Flex 容器里还有需要截断的文本块，那块也得加
min-width: 0+white-space: nowrap+overflow: hidden+text-overflow: ellipsis
align-items: stretch 看似没生效，其实是行高没被定义
align-items: stretch 是 Grid 容器默认值，但它只对“已有高度的行”起作用。如果 grid-template-rows 是 auto 或未设置，整行高度由内容最高项决定，其他项虽被拉伸，但视觉上仍可能露白。
关键判断：打开开发者工具，看 Computed 里的 grid-template-rows 是不是 none 或 auto。如果是，说明行高完全由内容驱动，stretch 只是被动跟随。
- 改用
grid-template-rows: repeat(2, 1fr)（已知行数）或grid-auto-rows: 1fr（动态行数）给每行明确锚点 - 配合
min-height: 0和overflow: hidden控制子项内部溢出，避免单张图或长文本把整行撑高 - 别在 Grid 子项上同时写
align-items: stretch和height: fit-content，后者会覆盖前者
图片/文本撑开导致“假等高”，内容层必须主动约束
即使 DOM 高度一致，卡片内部布局错位也会暴露白边：比如标题顶部对齐、按钮卡底、描述区没吸满，或者图片没设 height: 100% 把行高顶高。
这不是 Grid 失效，而是内容失控。
- 图片必须加
height: 100%+object-fit: cover，且其父卡片（Grid 子项）要有明确高度上下文 - 卡片内部建议用
display: flex; flex-direction: column;，描述区加flex: 1吸收剩余空间 - 统一
box-sizing: border-box和内边距，避免 padding 差异造成视觉偏差 - 给卡片加
min-height: 0，防止内部 Flex 因 shrink 行为异常影响高度计算
1fr 就只是个摆设。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
