Grid子元素跨行跨列失效主因是父容器未启用Grid布局、行列范围不足、语法错误、自动放置干扰或样式被覆盖；需检查display: grid、轨道定义、属性值合法性、auto-placement行为及CSS层叠优先级。
Grid子元素跨行跨列无效，通常不是因为语法写错了，而是因为父容器没正确启用 Grid 布局，或子元素的 grid-row / grid-column 值超出了网格轨道范围，又或者被其他 CSS 规则意外覆盖。
确认父容器已声明 display: grid
子元素的 grid-row 和 grid-column 只在 Grid 格式化上下文中生效。如果父容器只是普通块级元素（比如 div 默认是 display: block），这些属性会被浏览器忽略。
- 确保父容器设置了
display: grid或display: inline-grid - 若用
grid-template-rows/grid-template-columns定义了显式网格，要检查行/列数量是否足够容纳子元素的跨行跨列需求 - 例如：
grid-template-rows: 1fr 1fr;只定义了 2 行，此时grid-row: 1 / 4;会失效（超出范围），浏览器会自动“收缩”到可用范围（如 1 / 3）或回退为默认单行布局
检查 grid-row / grid-column 的值是否合法
常见错误包括拼写错误、使用了非数字/关键词值、或混淆了起始/结束线编号与名称。
- 正确写法：
grid-row: 2 / 4;（从第 2 条线开始，到第 4 条线结束，跨 2 行）；grid-column: span 3;（向右跨越 3 列） - 避免写成
grid-row: 2 to 4;（CSS 中没有to关键字）或grid-row: 2-4;（这是无效语法） - 若使用命名线（如
grid-template-rows: [header-start] auto [main-start] 1fr [footer-end];），必须确保引用的名称存在且拼写一致
排查隐式网格与自动放置干扰
当子元素未显式指定位置，或部分位置被跳过时，Grid 会按自动放置算法（auto-placement）分配单元格，可能覆盖你手动设置的 grid-row / grid-column。
立即学习“前端免费学习笔记（深入）”；
- 检查是否误用了
grid-auto-flow: dense;，它可能导致元素被“填空”，打乱你预设的位置逻辑 - 确保没有多个子元素指定了相同的起始线（如都写
grid-row: 1;），造成重叠或隐式创建新行 - 用浏览器开发者工具（Elements → Styles）直接查看该子元素的 Computed 值，确认
grid-row-start/grid-row-end是否如预期解析
留意层叠与继承导致的样式覆盖
CSS 层叠规则可能让某个更具体的规则或后加载的样式表覆盖了你的 grid-row 设置。
- 在开发者工具中查看该属性是否被划掉（strikethrough），说明被更高优先级规则覆盖
- 注意是否在媒体查询、JavaScript 动态设置、或 CSS-in-JS 库中无意重写了该属性
- 尝试加
!important短暂验证（仅调试用），若此时跨行生效，说明确实是优先级问题
