fr在嵌套grid中“透支”空间的根本原因是其基于父容器当前可用内尺寸计算，而父容器若无显式高度约束，会被子内容撑开，导致1fr循环放大；解决关键是打断隐式增长链，如设max-height、用minmax(0,1fr)或改用flex布局。
fr 单位在嵌套 Grid 容器中会“透支”可用空间
根本原因不是 fr 本身有问题，而是它基于「当前网格容器的可用内尺寸」计算，而嵌套时父容器若未显式限制尺寸（比如没设 height 或 max-height），其高度会由子内容撑开——此时子 Grid 的 1fr 就可能拿到远超预期的高度，形成循环放大。
常见现象：外层卡片用 display: grid; grid-template-rows: 1fr auto;，内部又套一层 grid-template-rows: 1fr 1fr;，结果整个卡片高度失控，溢出父容器或触发滚动。
- 父 Grid 无固定高 → 高度由子内容决定
- 子 Grid 的
1fr按父当前高度算 → 父又被撑得更高 → 死循环 - 浏览器不会报错，但布局“悄悄变胖”
嵌套 Grid 中 fr 必须配合明确的尺寸约束
想让 fr 正常工作，就得打断这个隐式增长链。关键不是禁用 fr，而是给中间层加“刹车”。
- 给直接承载嵌套 Grid 的容器设
max-height或height（如height: 0; flex: 1;在 Flex 布局中更稳） - 用
minmax(0, 1fr)替代1fr：它允许行高压缩到 0，避免强制撑开 - 避免在未知高度的容器里对子 Grid 使用
grid-template-rows: 1fr 1fr—— 改用grid-auto-rows: 1fr+ 显式grid-row控制更安全
示例：父容器是卡片，子 Grid 是列表区，应写成：
.card-body {
height: 300px; /* 或 max-height: 300px */
display: grid;
grid-template-rows: 1fr;
}
<p>.list-grid {
display: grid;
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); /<em> 关键 </em>/
}</p>
flex 布局比嵌套 Grid 更适合“弹性高度容器”场景
当目标是让某区域填满剩余空间（比如侧边栏+主内容区），flex 的 flex: 1 比嵌套 fr 更可靠——它不依赖父容器已知尺寸，也不触发隐式高度膨胀。
-
fr是 Grid 的空间分配单位，本质是“等分可用空间”，但“可用空间”需先被定义 -
flex: 1是伸缩行为指令，浏览器会主动收缩/拉伸，天然适配动态内容 - 混合使用时，建议外层 Flex 控制主结构，内层 Grid 处理局部二维布局
调试时重点检查 computed height 和 grid row track sizes
Chrome DevTools 的 Layout 面板里，展开 Computed → 查 height 值是否意外为 auto；再点开 Grid 面板，看每条 row track 的实际尺寸——如果显示 247.333px (1fr) 但你期望的是 100px，说明父容器已被撑开，问题不在子 Grid 本身。
- 右键 Grid 元素 → “Show Grid Area” 可视化轨道，快速识别哪一行异常膨胀
- 临时加
outline: 1px solid red到嵌套 Grid 容器，观察是否超出预期边界 - 把子 Grid 的
grid-template-rows换成像素值（如100px 100px）测试：若此时布局正常，基本锁定是fr的上下文问题
真正棘手的从来不是 fr 怎么写，而是你没意识到它的计算起点已经被上层悄悄改写了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
