grid-row: 1/6只占5行，因指行线而非行数；6行网格有7条线，1/6跨5个轨道；正确应为1/7，span比负值更安全，嵌套需父容器设display: grid。
grid-row: 1/6 为什么只占 5 行？
因为 grid-row 指的是行线（row lines），不是行数。一个划分为 6 行的网格，实际有 7 条水平行线：从顶部的第 1 条线，到底部的第 7 条线。1/6 表示从第 1 条线开始、到第 6 条线结束，中间只跨了 5 个轨道（即 5 行），最后一行被跳过。
常见错误现象：
-
.item { grid-row: 1/6; }在 6 行高容器中显示明显偏矮 - 多列布局里，各列底部无法对齐，视觉上“参差不齐”
- DevTools 网格叠加层显示该元素没触达容器底边
正确做法是按轨道数 + 1 推算终点线号：6 行 → 终点线为 7，所以应写 grid-row: 1/7。
负值和 span 写法哪个更安全？
负值（如 grid-row: 2 / -1）依赖隐式行线总数，而 span（如 grid-row: 2 / span 3）明确表达“从第 2 条线起，跨越 3 行”，语义更直白、不易算错。
使用场景与风险：
- 当网格行数动态变化（比如 JS 插入新项）时，
-1仍指向最后一条线，但若内容撑高导致隐式行增多，span更可控 -
grid-row: 3 / 1这种起止颠倒写法会被浏览器自动纠正为1 / 3，但逻辑已失真，应杜绝 - 命名线（如
grid-row: header / footer）需确保父容器已用grid-template-rows显式定义对应名称，否则回退为数字线匹配，结果不可控
打印模式下 grid-row 还能用吗？
能，但仅限显式数字线号（如 grid-row: 2 或 grid-row: 1 / 4），命名线和 grid-template-areas 在 @media print 中基本失效。
关键限制：
- 必须在
@media print中重新声明grid-template-rows和grid-template-columns，不能依赖屏幕样式继承 -
fr单位在打印中常被解析为 0 或撑满整页，建议改用px、em或百分比 - 每个网格项需加
break-inside: avoid，否则浏览器可能在项中间分页，破坏布局完整性
嵌套 Grid 中 grid-row 失效怎么办？
最常见原因是子容器漏写了 display: grid。Grid 不继承，子元素即使写了 grid-row，若父容器没设 display: grid，这些属性就只是“被忽略的无效声明”。
排查要点：
- 打开 DevTools 的 Computed 面板，检查目标容器的
display值是否为grid，而不是block或被其他规则覆盖 - 确认你修改的是“容器”，而非它的某个子元素——
grid-row是子项属性，grid-template-rows才是容器属性 - 避免混用：
grid-area会覆盖grid-row和grid-column，二者不要同时设
真正容易被忽略的是：你以为在调一个“嵌套网格”的 grid-row，其实那个元素根本不在任何网格上下文中——它只是个普通块级元素，所有 grid 属性都静静躺在 Styles 面板里，毫无作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
