grid-row 和 grid-column 仅对直接子元素生效，不穿透嵌套层级；父容器须设 display: grid 或 subgrid 才使子元素参与其网格布局，否则命名线需带方括号、负值线号除外，绝对定位需网格项自身设 position: relative。
grid-row 和 grid-column 只对直接子元素生效
这两个属性不会穿透嵌套层级——如果 #inner-div 套在 #outer-div 里，而 #outer-div 本身只是顶层网格的一个普通网格项（没设 display: subgrid），那 #inner-div 的 grid-row: 2 / 4 就是相对于 #outer-div 自身内部的网格线计算，和顶层无关。
常见错误现象：#outer-div 在顶层只占 1 列（比如 grid-column: 1 / 2），宽度仅 5vw；此时给 #inner-div 写 grid-column: 2 / 3，浏览器会直接忽略或修正为 1 / 2，导致位置“消失”或错乱。
- 确认父容器是否真的启用了
display: grid或display: subgrid - 用开发者工具检查目标元素的 computed
display和grid-area，看是否被继承或覆盖 - 若只是想让子元素参与顶层布局，优先考虑扁平化结构：把
#inner-div提升为顶层网格的直系子元素
命名线写法必须带方括号
定义了 grid-template-rows: [a] 100px [b] 200px [c]，就不能写 grid-row: a / c——必须写成 grid-row: a / c（注意：方括号是语法必需，不是可选装饰）。
不加括号会被当成数字语法解析，a 被当变量名或无效值，最终退回到 auto 行为。
- 命名线适合语义化强、多人协作的项目，但需全员遵守括号规则
- 负值线号（如
-1）不用括号，grid-column: 1 / -1是合法且常用写法 - 混合使用命名线和数字线时，确保逻辑连贯，比如
grid-row: a / 3是允许的，但要确认第 3 条线确实存在
绝对定位子元素必须有定位上下文
想让 .badge 钉在某个卡片右上角，不能只给 Grid 容器加 position: relative；得给那个卡片本身（即该网格项）加 position: relative，否则 .badge 会以 body 为参考系“飞走”。
Grid 容器默认是 position: static，它不提供定位上下文；position: absolute 只向上找第一个非 static 祖先。
- 检查开发者工具中目标网格项的
position计算值，确认不是static - 如果网格项本身已是
absolute或fixed，无需额外加relative，但要注意外层遮挡和堆叠上下文 -
grid-area对绝对定位元素完全无效——它已脱离网格流，定位只认top/right等偏移量
动态插入元素需显式指定 grid-row/grid-column
循环生成的列表项（如 .red-box）靠自动放置填充，但广告位（.green-box）若放在 HTML 结构末尾，默认会被塞到最后一行末尾，而非你想要的第 3 行第 2 列。
解决方法不是调整 HTML 顺序，而是用 CSS 显式接管它的位置：
.green-box {
grid-row: 3;
grid-column: 2;
}
- 即使它在 DOM 中排在最后，也能精准落到目标格子
- 若该格子已有其他元素，可用
z-index控制层叠顺序 - 避免依赖
nth-child()定位，因为动态内容数量不确定，索引不可靠
嵌套层级和定位上下文这两点最容易被忽略——它们不报错，但会让样式表现和预期严重脱节。调试时优先查这两处，比反复调 grid-row 数字更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
