minmax(min, 1fr) 中的 1fr 是剩余空间分配权而非最小高度，其 min 值仅在容器有足够可用空间时生效；需配合容器 min-height 或其他约束才能真正保障最小高度。
minmax(min, 1fr) 中的 1fr 不是“最小高度”，而是剩余空间分配权
很多人以为 minmax(200px, 1fr) 能让网格行“至少 200px，撑不满就停”，实际不是。这里的 1fr 是弹性增长上限，不是固定高度值——它只在有剩余空间时才起作用，且会和其他 1fr 行均分剩余空间。如果内容很少、容器高度小，这行可能被压缩到比 200px 还小（除非加额外限制）。
常见错误现象：grid-template-rows: minmax(200px, 1fr) minmax(100px, 1fr)，但整个容器只有 250px 高，结果两行被强制挤压，第一行远低于 200px。
- 必须配合
min-height或grid-auto-rows+ 容器约束使用，否则minmax的 “min” 只在可用空间足够时生效 -
1fr在单行场景下无效：若只有一行设为minmax(200px, 1fr)，而容器高 180px，该行仍会收缩到 180px（不满足 min） - 真正保障最小高度，得靠
min-height本身，或用minmax(200px, max-content)配合内容撑开
想让某一行“至少 200px，有空余再拉伸”，正确写法是 minmax(200px, 1fr) + 容器最小高度
单纯写 minmax(200px, 1fr) 不够，Grid 布局会优先满足整体容器尺寸约束。要让 “最小高度” 实际生效，容器本身得有下限。
使用场景：侧边栏+主内容区布局，希望主内容区不低于视口 80%，但又不能压扁侧边栏。
立即学习“前端免费学习笔记（深入）”；
- 给网格容器设
min-height: 100vh（或具体数值），再配合grid-template-rows: minmax(200px, 1fr) auto - 若内容区需严格保底，改用
minmax(200px, minmax(0, 1fr))—— 外层minmax保底，内层minmax(0, 1fr)允许其参与弹性分配 - 避免对
1fr行设height或max-height，会干扰 Grid 自动计算逻辑
和 minmax(auto, 1fr)、minmax(min-content, 1fr) 的关键区别
minmax(min, 1fr) 的 min 是绝对长度（如 200px），而 auto 和 min-content 是内容驱动的，行为完全不同。
-
minmax(auto, 1fr)：先按内容自然高度（含 padding/border）确定基础高度，再分配剩余空间；但若内容为空，可能塌成 0 -
minmax(min-content, 1fr)：以内容最小可显示尺寸（比如一行文字不换行的宽度对应的高度）为下限，对文本类内容更友好 -
minmax(200px, 1fr)最刚性，适合 UI 区域有明确设计高度要求的场景（如工具栏、固定头） - 三者在 flexbox fallback 或旧浏览器兼容时表现差异极大，
1fr在 IE 中完全不支持，需用flex: 1替代
容易被忽略的陷阱：grid-row-start / grid-row-end 会绕过 minmax 约束
当某格显式设置了 grid-row-start 和 grid-row-end（比如跨行），它的高度不再受所在轨道的 minmax() 控制，而是由它自己内容和行间距共同决定。
错误现象：你写了 grid-template-rows: minmax(200px, 1fr) 100px，但某个 div 加了 grid-row: 1 / -1，结果它把第一行撑高到 400px，第二行却被压缩变形。
- 跨行元素的高度会影响整行轨道的基线，进而影响其他同轨道格子的对齐和尺寸
- 若需稳定最小高度，建议避免跨行 +
minmax()混用；或改用align-self: start+ 显式min-height控制单格 - 调试时用浏览器 DevTools 的 Layout 面板看“Track sizing”详情，比肉眼判断更准
minmax(200px, 1fr) 看似简单，但真正起效依赖容器高度、内容体量、是否跨行、以及是否有其他轨道竞争空间——这几个变量一组合，结果就很容易偏离预期。 
