-1 指当前方向最外侧的隐式网格线，即显式定义的最后一条线之后那条；负数从该边界反向计数，起点值必须小于终点值才有效，gap 不影响线编号。
grid-column / grid-row 里的 -1 到底指哪条线
负数索引不是从最后一个元素开始数，而是从隐式网格末尾反向计数——-1 指的是**最右侧（列）或最底部（行）那条显式定义的网格线之后的那一条**，也就是「最后一格之后」的位置。它不等于“最后一格的起始线”，这点容易误解。
常见错误现象：grid-column: -1 / -1 什么也不显示；grid-column: -2 / -1 却能占一列——因为 -1 是终点线，必须搭配一个更小的负数起点才有宽度。
-
-1总是指当前网格容器中该方向上**最外侧的那条线**（即隐式轨道边界），和你写了几行grid-template-columns无关，但受其影响 - 如果用了
grid-template-columns: 100px 1fr 200px，共定义了 4 条列线（0 到 3），那么-1就是第 4 条线（即线 3 之后那条），-2是线 3，-3是线 2……依此类推 - 没写
grid-template-*时，只有一列/一行，默认只有线 0 和线 1，此时-1就等价于线 1，-2才是线 0
用 grid-area 写倒数区域时负数怎么配对
grid-area 是 grid-row-start / grid-column-start / grid-row-end / grid-column-end 的简写，负数在这里要成对理解：起点必须比终点“更靠前”（数值更小），否则无效。
使用场景：想让某个元素固定占最后两列，但列数可能动态变化（比如响应式列表）。
立即学习“前端免费学习笔记（深入）”；
-
grid-area: 1 / -3 / 2 / -1表示从倒数第 3 条列线开始，到倒数第 1 条列线结束 → 占两列 -
grid-area: auto / -2 / auto / -1表示只占倒数第二列到倒数第一列之间（即最后一列） - 错误写法：
grid-area: 1 / -1 / 2 / -2—— 起点-1已经在终点-2右边了，浏览器会忽略或重置为默认值
gap 和负数网格线的关系：gap 不影响线编号
gap 只是视觉间距，它不会插入新的网格线，也不会改变原有线的编号逻辑。所有负数依然按原始轨道线计算，无视 gap 存在。
性能 / 兼容性影响：这个行为在所有支持 Grid 的现代浏览器中一致（Chrome 57+、Firefox 52+、Safari 10.1+），无兼容性陷阱；但老版本 Safari 对负数支持不稳定，若需兼容 iOS -1。
- 即使设置了
gap: 20px，grid-column: -2 / -1仍指最后两个轨道之间的那条线，不是 gap 后面新生成的线 - 想让元素避开 gap？不能靠调线号，得用
justify-self: end或配合margin
调试负数网格线的最快方法
别猜，直接打开浏览器开发者工具的 Grid 面板（Elements → Layout → Grid），勾选 “Show line numbers”，就能看到每条线的真实编号，包括负数——-1 会明确标在最外侧。
容易被忽略的地方：当容器有 padding 或 border 时，Grid 线仍然从 content box 开始算，负数不会自动避开 padding 区域；如果你希望元素贴着容器右边缘，grid-column: -1 / -1 是无效的（零宽度），得用 grid-column: -2 / -1 或改用 justify-self: end。
