grid-row-start跨行本质是控制网格项行起点而非合并，需配合grid-row-end或span才能生效；行线编号从1开始，显式定义grid-template-rows是稳定跨行的关键前提。
grid-row-start 跨行合并的本质是控制行起点，不是“合并”
它只是告诉某个网格项从第几行线开始放置，并配合 grid-row-end（或 grid-row-span）决定占几行。CSS Grid 没有真正意义上的“单元格合并”，所谓“跨行”其实是让一个元素跨越多条行线——起点由 grid-row-start 定义，终点由 grid-row-end 定义，中间自动拉伸填充。
常见错误是只设 grid-row-start 却忽略 grid-row-end，结果元素仍按默认 span 1 行渲染，看起来毫无变化。
- 必须成对使用：
grid-row-start+grid-row-end，或用简写grid-row: 2 / 4（从第 2 行线开始，到第 4 行线结束，即跨 2 行） - 行线编号从 1 开始，负数从末尾倒数：
grid-row-start: -2表示倒数第二条行线 - 如果容器没有显式定义
grid-template-rows，浏览器会按内容自动生成隐式行轨道，此时跨行行为可能不稳定，尤其在动态内容下
不规则形状常用组合：跨行 + 跨列 + 自定义行高
仅靠 grid-row-start 无法构成“L 形”“T 形”等不规则布局，必须配合列方向控制和轨道尺寸微调。例如一个左侧主内容区（跨 3 行）、右侧顶部工具栏（占第 1 行）、右下角状态面板（占第 2–3 行），就需要：
.container {
display: grid;
grid-template-rows: 60px 1fr 1fr; /* 显式定义三行，避免隐式轨道干扰 */
grid-template-columns: 1fr 200px;
}
<p>.main { grid-row: 1 / -1; grid-column: 1 / 1; }
.toolbar { grid-row: 1; grid-column: 2; }
.status { grid-row: 2 / -1; grid-column: 2; }
</p>
- 显式声明
grid-template-rows是关键前提，否则grid-row: 1 / -1在无明确边界时可能撑不满容器 - 用
-1表示最后一根行线，比硬写数字更健壮（尤其当行数可能变化时） - 避免混用
span和行线编号：如grid-row: 2 / span 2在隐式网格中易出错，优先统一用线号
容易踩的坑：auto-fit/auto-fill 与跨行冲突
当用 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))) 做响应式列时，grid-row-start 跨行可能失效——因为行轨道数量不固定，grid-row: 1 / 3 可能指向不存在的第 3 行线。
- 解决办法：给容器加
grid-auto-rows: minmax(100px, auto)，确保隐式行轨道有最小高度约束 - 更稳妥的做法是放弃纯 auto 模式，在关键区域改用固定行定义，例如把头部、主体、底部用
grid-template-rows: 80px 1fr 60px锁死，仅在主体内嵌套子网格做响应式 - 调试技巧：打开浏览器开发者工具的网格叠加层（在 Elements → Styles 面板勾选 “Show grid areas”），直接看行线编号是否如预期出现
替代方案：什么时候不该硬用 grid-row-start
如果目标是“一个元素视觉上覆盖多个不连续区域”（比如浮动式悬浮按钮盖住网格右下角两个单元格），grid-row-start 不适用——它只能控制单个矩形区域的起止，不能跳过中间行或制造空洞。
- 这种场景更适合用绝对定位 +
grid-area辅助定位，或把容器设为position: relative，再用position: absolute子元素配合inset控制位置 - 若需真正语义化的不规则区域（如图文环绕、复杂仪表盘），考虑用
display: subgrid（仅支持较新浏览器）将子网格继承父网格线，再精细控制子项起点 - 老项目兼容性要求高时，
grid-row-start跨行在 IE 完全不支持，需降级为 Flex 或 float 布局，别指望 polyfill
跨行本身很简单，难的是在响应、嵌套、动态内容里保持行线编号可预测——多数问题根源不在语法写错，而在没管住网格容器的轨道生成逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
