grid-row和grid-column未生效的主因是父容器未设display: grid或布局属性干扰；需检查线号范围、避免与grid-area混用，并注意DOM顺序与可访问性问题。
grid-row 和 grid-column 为什么没生效
常见原因是元素没有显式设置 display: grid 的父容器，或者父容器用了 grid-auto-flow: column 等干扰布局流向的属性。更隐蔽的是：子元素若未声明 grid-area 或 grid-row/grid-column，浏览器仍按 DOM 顺序自动分配网格线，此时手动指定的行列可能被忽略。
- 检查父容器是否设置了
display: grid且定义了grid-template-rows/grid-template-columns - 确认子元素的
grid-row值在父容器定义的行范围内（比如只写了两行grid-template-rows: 1fr 1fr，却给某元素设grid-row: 3，它会被挤到隐式网格中） - 避免同时混用
grid-area和grid-row+grid-column—— 后者会被前者覆盖
grid-row-start 和 grid-row-end 怎么写才不越界
grid-row 是简写，等价于 grid-row-start / grid-row-end。写单值如 grid-row: 2 表示从第 2 条线开始、到下一条线结束（即占一行）。但容易出错的是：线号从 1 开始计数，且负数从末尾反向计（-1 是最后一根线），而很多人误以为是“第几行”。
- 用
grid-row: 2 / 4明确跨两行（从第 2 线到第 4 线），比grid-row: 2 / span 2更直观可控 - 若父容器使用
grid-template-rows: [a] 1fr [b] 1fr [c]，可用命名线grid-row: a / c，避免硬编码数字导致重构困难 - 当内容高度超出设定行高时，
grid-row-end不会自动拉伸——它只控制起止线，高度由grid-template-rows或grid-auto-rows决定
DOM 顺序和视觉顺序不一致时，可访问性怎么保障
用 grid-row 和 grid-column 移动元素位置后，屏幕阅读器仍按 HTML 源码顺序读取，可能导致逻辑错乱。这不是 CSS 能解决的问题，必须配合语义化结构或 ARIA。
- 优先考虑是否真需要视觉重排——有时用
order（配合display: flex）或调整 HTML 结构更稳妥 - 如果必须用 Grid 重排，对关键交互元素补充
aria-labelledby或aria-describedby显式建立逻辑关系 - 避免把导航栏或主内容块用 Grid 拖到 DOM 后面又显示在前面——这类结构性错位会让键盘焦点和阅读顺序彻底脱节
移动端响应式中 grid-row 容易失效的场景
媒体查询里仅修改 grid-template-columns 而不重置 grid-row，常导致小屏下元素堆叠错乱。因为行列线数量变了，但原先指定的线号可能已不存在。
立即学习“前端免费学习笔记（深入）”；
- 在断点中重新声明所有涉及重排的
grid-row和grid-column，不要依赖继承 - 用
grid-template-areas配合grid-area替代纯线号定位，在多端适配时语义更清晰、容错更强 - 测试时重点看
grid-row: span N在不同列数下的表现——例如span 2在三列网格中可能跨到空白区域，造成视觉断裂
grid-row 后，其他元素因自动定位规则发生连锁偏移。建议每次调整前先加 outline: 1px solid red 看网格线分布，再动手。 
