固定行数时用grid-template-rows显式定义所有行高，如100px repeat(3,25px)；动态内容时用grid-template-rows: auto配合grid-auto-rows: 0控制首行可见、后续行隐藏，并注意容器高度与fr单位兼容性。
直接在 grid-template-rows 里写死第一行高度，后面用 repeat() 或 auto + grid-auto-rows 控制其余行——但具体怎么选，取决于你是固定行数还是动态内容。
固定行数时：显式声明所有行高
比如你明确知道总共 4 行，且只要第 1 行是 100px，其余 3 行统一为 25px，那就别用 repeat(4, 25px) 这种均分写法。直接展开写：
grid-template-rows: 100px repeat(3, 25px);
这等价于 100px 25px 25px 25px，浏览器会按顺序分配轨道，不需要额外设置 grid-auto-rows。常见错误是误以为 repeat() 能“跳过”首行，其实它只是重复值，不能跳过。
立即学习“前端免费学习笔记（深入）”；
- 必须确保子元素总数量匹配显式定义的行数（或列数，取决于
grid-auto-flow方向） - 如果子元素少于轨道数，空轨道仍会保留高度；多于轨道数，则触发隐式网格，此时
grid-auto-rows才生效 - 单位混用没问题，比如
60px 1fr repeat(2, min-content)是合法的
动态内容、只显示首行时：grid-auto-rows: 0 是关键
当卡片或项目数量不固定、自动换行，且你只想让第一行可见（比如响应式商品列表），就不能靠显式行数——因为后续换行产生的行数未知。这时要靠隐式行控制：
grid-template-rows: auto;grid-auto-rows: 0;
第一行由 grid-template-rows 定义为 auto，高度随内容撑开；所有后续隐式生成的行（即第二行起）被 grid-auto-rows 强制设为 0。但光设 0 不够，还得配合：
- 每个网格项加
overflow: hidden，否则内容可能从0高度里溢出 - 别在网格项上直接设
padding，否则0高度下 padding 仍占空间；应套一层内层div，把padding写在里面 -
grid-auto-rows: 0对fr单位无效，fr会忽略0并重新计算，所以这里只能用绝对值或auto/0
grid-template-rows 和 grid-auto-rows 的分工容易混淆
grid-template-rows 只管你**明确定义的那些行**，哪怕只写一个值，也仅代表第一行；剩下的全归 grid-auto-rows 管——包括所有因子元素超出显式轨道而新增的行。很多人以为写了 grid-template-rows: 100px 就等于“第一行 100px，其余不管”，结果发现第二行还是很高，就是因为漏了 grid-auto-rows。
典型场景对比：
- 表格类布局（固定行列）→ 用
grid-template-rows: 100px repeat(n, 25px) - 瀑布流/卡片墙（动态换行）→ 用
grid-template-rows: auto; grid-auto-rows: 0; - 混合布局（首行固定 + 后续自适应）→
grid-template-rows: 80px 1fr; grid-auto-rows: 1fr;，注意这里grid-auto-rows影响的是第三行及以后
最常被忽略的一点：容器本身如果没有明确高度（比如没设 height 或 min-height），fr 单位会失效，auto 行也可能压缩异常——尤其是和 grid-auto-rows: 0 共存时，得确认父容器有足够上下文供 Grid 计算。
