grid-row 跨行需指定行轨道线编号，格式为 grid-row: / ；起始线从容器顶部开始编号为1，非项目序号；span 语法可简化跨行；隐式网格和ie兼容性需特别注意。
grid-row 怎么写才能跨行
直接写 grid-row: 1 / 3 就能跨两行，但很多人卡在“起始线编号从哪来”——它不是按项目顺序数的，而是按网格容器的**行轨道线（row grid lines）** 编号，从上到下依次是 1、2、3…，最顶是 1，最底是 n+1。
常见错误是把项目序号当行线号，比如以为第一个项目占第 1 行就该写 grid-row: 1，其实那只是默认的 grid-row: 1 / 2；要跨行，必须明确指定起止线，格式始终是 grid-row: <start-line> / <end-line></end-line></start-line>。
-
grid-row: 2 / 4→ 占用第 2 行和第 3 行（共两行） -
grid-row: span 2→ 从当前默认起始行往下跨 2 行（自动计算终点） -
grid-row: auto / span 3→ 起点由 Grid 自动分配，向下跨 3 行
grid-row 和 grid-template-rows 的关系
跨几行，最终能占多高，取决于 grid-template-rows 定义的每行尺寸。如果写了 grid-row: 1 / 4 但 grid-template-rows: 50px 50px（只定义了两行），浏览器会自动补一条隐式行轨道，高度按 grid-auto-rows（默认为 auto）处理，可能撑得很高或塌陷。
- 显式定义足够行轨道更可控：
grid-template-rows: 60px 60px 60px - 避免依赖隐式网格：设
grid-auto-rows: 0可快速暴露漏定义问题 - 用
fr单位时，跨行会按比例分走对应份数，不是简单叠加
跨行后内容溢出或对齐异常
跨行本身不控制内容怎么放，grid-row 只管“占位”，内容仍受 align-self、justify-self 或容器级 align-items 影响。常见表现是文字贴顶、图片被裁、文字换行错乱。
- 垂直居中加
align-self: center（项目级）或align-items: center（容器级） - 内容超长时，
overflow: hidden比靠white-space: nowrap更可靠 - Flex 子项在跨行 Grid 区域里可能表现不稳定，优先用
display: block+ 内部布局
IE 中 grid-row 不生效怎么办
IE10/11 支持的是旧版 Grid 语法，grid-row 完全无效。它用 -ms-grid-row 和 -ms-grid-row-span，而且行线编号逻辑不同：起始线从 1 开始，但 -ms-grid-row-span 是“跨多少行”，不是“到第几线”。
- IE 写法：
-ms-grid-row: 2; -ms-grid-row-span: 2≈ 标准grid-row: 2 / 4 - 不能混用新旧语法，否则现代浏览器会忽略带
-ms-的规则 - 如需兼容 IE，建议整套用 Autoprefixer + postcss-grid-kiss 等工具降级，手动维护两套规则极易出错
跨行看着简单，真正卡住人的往往是行线编号理解偏差、隐式网格行为不明确，还有 IE 那套完全割裂的规则——动手前先确认目标环境和 grid-template-rows 是否兜得住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
