grid-column: -1 指向最后一根列网格线，不是最后一列或倒数第一个格子；单独使用等价于 grid-column-start: -1; grid-column-end: auto，常导致元素消失，正确用法是配合起始线如 1 / -1。
grid-column: -1 是什么，不是什么
grid-column: -1 不是指“最后一列”，也不是“倒数第一个格子”，而是明确指向**最后一根列网格线**——即容器右边缘那条隐式或显式生成的线。它不依赖列数是否固定，只依赖当前网格容器实际存在的列线编号体系。负索引从 -1 开始倒数，-2 是倒数第二条线，以此类推；不存在 -0，写出来会被忽略或解析为无效值。
什么时候 grid-column: -1 会失效或行为异常
常见失效场景不是语法错，而是线号根本不存在或被截断：
-
grid-column: -1单独写等价于grid-column-start: -1; grid-column-end: auto，但grid-column-end: auto不等于“到末尾”，它交给自动布局算法决定，结果常是元素缩成一条线、不可见 - 只写
grid-column: -1而没配grid-column-end，几乎总导致元素消失；正确用法是grid-column: 1 / -1（从首线到末线）或grid-column: -2 / -1（跨最后一格） - 在只有 3 列的容器中写
grid-column: -4 / -1，起点 -4 不存在，浏览器会按auto / -1处理，位置漂移 - Safari ≤ 16.6 中，
grid-row: -2 / -1可能被误解析为“倒数第二线到倒数第二线”，而非预期的“倒数第二线到最后一线”
如何安全使用负索引做逆向定位
负值本身没问题，关键在组合方式和上下文约束：
- 横跨全部列：用
grid-column: 1 / -1，比grid-column: 1 / 999更可靠，尤其当列数动态变化时 - 固定跨末尾一格：确认容器至少有 N 条列线再写
grid-column: -2 / -1；可用 DevTools Layout 面板勾选 “Show line numbers” 实时验证 - 响应式中避免硬编码负值：改用命名线，如定义
grid-template-columns: [start] 1fr [end]，再写grid-column: start / end，语义清晰且不受负索引兼容性影响 - 与
span混用要小心：grid-column: span 2是跨 2 个轨道，grid-column: -2 / span 1是非法语法，必须用线号或span单独出现
为什么 grid-column: 3 / 1 不报错却没效果
CSS Grid 规范明确规定：若起始线号大于结束线号（如 3 / 1 或 -1 / -3），该声明被视为空操作，等效于 grid-column: 1 / 1 —— 元素占据零宽度，视觉上消失。这不是浏览器 bug，而是标准行为。调试时若发现元素“不见了”，先检查是否无意写了反向线号，尤其在复制粘贴或动态拼接 CSS 变量时容易出这种错。
立即学习“前端免费学习笔记（深入）”；
