父容器未设置display: grid或网格线不足导致跨行跨列失效，需确保父元素正确声明为grid容器，合理定义网格轨道，使用正确语法如grid-column: 1/3或grid-column: 2/span 2，并检查样式优先级与覆盖问题。
在使用 CSS Grid 布局时，如果子元素的 grid-column 或 grid-row 设置后跨行或跨列不生效，通常是由于父容器未正确设置为 grid 容器，或语法书写错误导致。下面列出常见原因及解决方法。
确保父容器是 Grid 布局
子元素要使用 grid-column 和 grid-row，其父元素必须显式设置为 Grid 容器。
错误示例： ```css .container { /* 缺少 display: grid */ } .item { grid-column: 1 / 3; } ```正确写法：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 至少定义列 */
grid-template-rows: auto auto; /* 可选，行可自动 */
}
.item {
grid-column: 1 / 3; /* 跨两列 */
grid-row: 1 / 3; /* 跨两行 */
}检查 grid-column / grid-row 语法是否正确
grid-column 和 grid-row 支持两种写法：起始线到结束线，或使用 span 关键字。
立即学习“前端免费学习笔记（深入）”；
-
grid-column: 1 / 3;—— 从第1条线开始，到第3条线结束（跨2列） -
grid-column: 2 / span 2;—— 从第2列开始，跨越2列 -
grid-row: span 2 / 4;—— 不推荐这种写法，span 应放在后面
注意：span 写法应为 start / span N 或 span N / end，避免逻辑混乱。
确认网格轨道数量足够
如果你设置 grid-column: 1 / 4，但父容器只定义了两列：grid-template-columns: 1fr 1fr;，那么第4条线不存在，可能导致表现异常或被截断。
解决方案：增加列数或使用 grid-auto-columns 允许隐式生成列。
避免被其他样式覆盖
检查是否有其他 CSS 规则覆盖了你的 grid-column 设置，比如：
- 更具体的 CSS 选择器
- 使用了 !important 的旧规则
- JavaScript 动态修改了样式
建议使用浏览器开发者工具检查元素最终计算样式，确认 grid-column 是否真正生效。
基本上就这些。只要父元素是 display: grid，网格线存在，语法正确，跨行跨列就会正常工作。不复杂但容易忽略细节。
