grid-template-rows的基本写法是用空格分隔多个值，常见类型包括px、em、fr、auto、minmax()和repeat()；例如100px 200px定义两行高度，1fr 2fr按比例分配，repeat(3, 1fr)简化重复，minmax(100px, auto)设定范围。
grid-template-rows 的基本写法和常见值类型
grid-template-rows 用来显式定义网格容器中每一行的高度（即“行轨道”）。它不自动推导，必须手动指定，否则默认只有一行且高度为 auto。
最常用的值类型包括：px、em、fr、auto、minmax() 和重复语法 repeat()。注意：这些值之间用空格分隔，不是逗号。
-
100px 200px→ 第一行高 100px，第二行高 200px -
1fr 2fr 1fr→ 三行按 1:2:1 比例分配剩余空间 -
auto 1fr minmax(100px, max-content)→ 第一行内容自适应，第二行占剩余空间，第三行最小 100px、最大不超过内容高度
使用 repeat() 简化多行重复定义
手写十几行 1fr 很容易出错，也难维护。repeat() 是标准解法，语法是 repeat(数量, 值)。
例如：grid-template-rows: repeat(4, 1fr) 等价于 1fr 1fr 1fr 1fr；repeat(3, 50px 100px) 展开为 50px 100px 50px 100px 50px 100px。
特别注意：repeat(auto-fit) 和 repeat(auto-fill) 只在 grid-template-columns 中有意义，不能用于 grid-template-rows —— 浏览器会直接忽略该行声明。
auto 与 minmax() 混用时的常见表现
auto 行高由内容决定，但若内容为空或含浮动/绝对定位元素，可能塌陷为 0 高；minmax(min, max) 更可控，尤其适合响应式场景。
比如：grid-template-rows: auto minmax(200px, 1fr) auto —— 头部和底部自适应，中间区域至少 200px、最多占满剩余空间。
- 若中间内容超长，
1fr部分会撑开容器，可能触发滚动条 - 若父容器没设
height或max-height，1fr在垂直方向无约束，结果不可预期 -
minmax(0, 1fr)是个常见 hack，用于让某行“尽可能收缩但不为负”，但需配合overflow: hidden防止内容溢出
调试 grid-template-rows 时最容易被忽略的点
很多布局问题其实不是 grid-template-rows 写错了，而是忽略了它的作用前提：
- 必须在 display 为
grid或inline-grid的容器上设置，对子元素无效 - 如果子元素用了
grid-row跨行（如grid-row: 1 / -1），实际渲染行数可能少于你定义的轨道数，此时未被占用的轨道仍存在但不可见 - Firefox 开发者工具的网格检查器能高亮每条轨道，Chrome 需手动勾选“Show line numbers”才能看到行号标签，否则容易误判哪一行对应哪个值
- 当用
vh单位（如grid-template-rows: 100vh）时，注意移动端地址栏缩放会导致视口高度变化，100vh可能超出可视区
真正卡住的时候，先打开浏览器网格叠加层，再逐行比对 CSS 声明和实际轨道数量 —— 多数问题出在空格漏写、单位拼错（fr 写成 FR）、或父容器高度未设定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
