grid-row 通过指定起始和结束行线号（如 2 / 4）或命名线（如 main / footer）控制跨行，span 需明确起点，硬编码行号易失效，推荐命名线提升可维护性。
要用 grid-row 让网格项跨越多行，关键不是“合并几行”，而是**指定它从哪条行线开始、到哪条行线结束**。Grid 的行线编号从 1 开始，两条相邻行线之间构成一个“行轨道”。写对起始和结束线号，才能准确跨行。
明确起始和结束行线（最常用）
这是最清晰、可预测的方式。例如：
-
grid-row: 2 / 4;→ 从第 2 条行线开始，到第 4 条行线结束，实际占据第 2 行和第 3 行（共 2 个轨道） -
grid-row: 1 / -1;→ 从首行线到末行线，跨满所有显式定义的行；若未定义grid-template-rows，隐式生成的行可能让-1指向意料之外的位置 - 如果用了命名线：
grid-template-rows: [header] 80px [main] 1fr [footer];，就能写grid-row: main / footer;，语义强且不易出错
用 span 配合起点（适合动态或相对跨度）
span 表示“跨越多少个轨道”，但必须有明确起点，否则行为不可控：
-
grid-row: 3 / span 2;→ 从第 3 条行线开始，向下跨 2 个轨道（即占第 3、4 行） -
grid-row: span 2;→ 等价于grid-row: auto / span 2;，由 Grid 自动分配起点，结果取决于其他项顺序和容器状态，不建议用于关键布局 - 注意：
span all或span auto是无效写法，浏览器会忽略——Grid 规范中span后只能跟正整数
避免常见误区
很多问题其实不是 grid-row 写错了，而是配套设置没跟上：
立即学习“前端免费学习笔记（深入）”；
- 只写
grid-row: 1 / -1;不等于侧边栏自动撑满视口高度——父容器需有明确高度约束（如min-height: 100vh），否则隐式行高可能很小 - 跨行后内容贴顶？
grid-row控制的是区域范围，不是内部对齐。要垂直居中，得在项目上加display: flex; justify-content: center; align-items: center;或place-items: center; - 内容被裁剪？检查是否设置了
overflow: hidden且字体/内边距过大，超出了所占网格区域的高度
响应式与维护建议
硬编码行号（如 2 / 4）在结构变动时容易失效：
- 插入新模块、折叠区块后，原行线编号偏移，跨行就会错位
- 优先用命名线定义逻辑区域（如
[sidebar-start]/[sidebar-end]），再通过grid-row: sidebar-start / sidebar-end;引用，更健壮 - 若必须用数字，搭配
grid-template-rows显式声明行数，避免依赖隐式网格
