minmax() 是控制 grid 轨道高度的唯一可靠方案，因其在 grid-template-rows 中定义轨道最小/最大尺寸，兼顾内容自适应与容器约束，而 fit-content() 不适用于 height 方向且兼容性差。
grid-template-rows 里 minmax() 是唯一靠谱方案
Grid 的轨道高度不能靠 min-height 或 max-height 直接控制，必须在定义轨道时用 minmax()。这是 CSS Grid 规范决定的：轨道尺寸由 grid-template-rows 或 grid-template-columns 主导，容器自身高度只是约束条件，不是定义来源。
常见错误是给子项（grid item）设 min-height: 200px，结果发现轨道没撑开——因为 item 高度受轨道限制，而不是反过来。
-
minmax(100px, 200px)表示该行至少 100px、至多 200px，实际高度由内容和可用空间共同决定 - 如果内容高度为 150px，且容器有足够空间，该行就取 150px；若内容只有 50px，也会拉到 100px（满足最小值）
- 写成
minmax(100px, 1fr)更实用：最小 100px，剩余空间按比例分配，避免死高
auto-fit 和 auto-fill 配合 minmax() 才能响应式缩放
单纯写 minmax(120px, 200px) 只对单行有效；想让多行轨道随容器宽度动态增减数量，必须搭配 auto-fit 或 auto-fill。
典型场景：卡片列表在小屏显示一列、中屏两列、大屏三列，每行高度还要自适应内容但不小于 150px。
-
grid-template-rows: repeat(auto-fit, minmax(150px, max-content)))—— 推荐用auto-fit，它会合并空轨道，更省空间 -
max-content比1fr更安全：避免因父容器高度不足导致轨道压缩到 0 - 别用
auto-fill+1fr，容易在窄容器里生成大量不可见轨道，触发滚动或布局错乱
fit-content() 能替代 minmax() 吗？不能，但可互补
fit-content(300px) 看起来像“最大 300px”，但它本质是 minmax(min-content, max(300px, min-content))，只管内容尺寸，不管外部约束。它不响应容器高度变化，也不参与 1fr 分配逻辑。
错误用法：grid-template-rows: fit-content(200px) fit-content(200px) —— 这两行加起来可能远超容器高度，且不会自动等分剩余空间。
- 适合场景：单行标题栏，内容不定长但不想超过 200px 宽度（注意：这是 width 场景，height 上几乎不用）
- height 方向基本不用
fit-content()，浏览器支持弱，Chrome 115+ 才开始有限支持，Firefox 仍不支持用于grid-template-rows - 真要限制最大高度，老实用
minmax(100px, 200px)，兼容性好、行为确定
设置 grid-auto-rows 是为了兜底，不是定义主轨道
当显式定义的轨道数不够（比如用 repeat(3, 1fr) 但实际有 5 个子项），多余子项会放进隐式网格，此时才轮到 grid-auto-rows 发挥作用。
很多人误把它当主轨道控制手段，结果发现前 3 行正常、第 4 行突然变矮或溢出——因为 grid-auto-rows 默认是 auto，不受你前面 minmax() 影响。
- 统一行为建议：
grid-auto-rows: minmax(100px, 200px)，和显式轨道保持一致 - 别设
grid-auto-rows: 1fr，隐式轨道不参与1fr计算，实际表现是auto - 如果完全不想出现隐式网格，加
grid-auto-flow: dense并配合grid-row-start手动定位，但代价是 HTML 语义断裂
真正难的不是写对 minmax()，而是想清楚：哪些高度必须刚性约束（比如工具栏），哪些该随内容弹性伸缩（比如正文区），哪些要留白让 1fr 去填。混用这三类逻辑时，minmax() 的第二个参数稍不留神就会和容器 height、max-height 产生冲突，得靠 DevTools 的 Layout 面板逐层看 computed height 才能定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
