grid-column: -1 单独使用无效，因等价于 grid-column-start: -1; grid-column-end: auto，导致元素宽度为0而消失；正确用法需配对起始线，如 -2 / -1 占最后一列。
grid-column: -1 本身不能让子元素“锚定到最后一列轨道线”——它只是把子元素的**结束轨道线**设为网格容器的**最后一根列轨道线（即隐式或显式定义的最右侧边界）**，但起始位置仍需明确指定，否则会触发默认行为（如 grid-column: auto），结果往往不是你想要的“靠右对齐”。
为什么 grid-column: -1 单独写没用
Grid 的 grid-column 是简写，等价于 grid-column-start / grid-column-end。当你只写 grid-column: -1，浏览器会把它解析为 grid-column-start: -1 / grid-column-end: auto ——也就是说，子元素从倒数第一根轨道线开始，向右跨 0 列（因为 end 是 auto，自动取 start + 1），最终渲染为一个宽度为 0 的不可见区域，甚至可能被忽略或报 layout warning。
常见错误现象：
- 元素消失或错位
- 控制台出现
Ignoring invalid value for 'grid-column'类提示（尤其在旧版 Safari） - 和预期“贴最右边缘”完全不符
正确写法：必须配对指定起始轨道线
要让一个子元素“右对齐到最后一列轨道线”，本质是让它**结束于 -1，同时宽度固定（比如占 1 栏）或由起始位置推导**。常用组合：
-
grid-column: -2 / -1→ 占倒数第二到倒数第一根线之间，即最右侧一列（推荐，语义清晰） -
grid-column: span 1 / -1→ 从某处起跨 1 栏，终点强制卡在-1（起点由浏览器自动计算，依赖网格项顺序和grid-auto-flow） -
grid-column: 1 / -1→ 从第一根线拉到最后一根线，即整行铺满（适合标题、分隔线）
注意：-1 指的是容器最外侧的列轨道线（包括隐式网格延伸后的边界），不是“最后一列的起始线”。如果列定义是 grid-template-columns: 100px 1fr，那总共有 3 根列轨道线（1, 2, 3），对应负索引是 -3, -2, -1；此时 -1 就是右边界。
配合 grid-template-columns 显式定义才可靠
隐式网格（靠 grid-auto-columns 自动扩展）下，-1 的位置可能随内容动态变化，导致布局不稳定。尤其当子元素数量不固定时：
- 如果没设
grid-template-columns，仅靠grid-auto-flow: column，-1可能指向不可预测的隐式列末尾 - 响应式场景中，用
minmax()或repeat(auto-fit, ...)定义列后，-1才有确定含义
示例（稳定右对齐按钮）：
.container {
display: grid;
grid-template-columns: 1fr min-content;
}
.item-btn {
grid-column: -2 / -1; /* 稳稳落在右侧那一列 */
}
替代方案：比 grid-column: -2 / -1 更直观的写法
如果你只是想“右对齐某个子项”，且该列已命名，用命名线更安全：
-
grid-template-columns: [start] 1fr [content-end] min-content [end]，然后写grid-column: content-end / end - 或者直接
justify-self: end（前提是父容器display: grid且该项未跨越多列）
但注意：justify-self 对齐的是**所在网格区域内部**，而 grid-column: -2 / -1 是**精确控制轨道线位置**——前者简单，后者可控性强，尤其在需要跨列或与其他项对齐时不可替代。
真正容易被忽略的点：负索引的 -1 永远指向容器最外侧轨道线，但它是否“可见”或“有内容可撑开”，取决于你有没有显式定义列模板或足够内容触发隐式网格。没定义列数就盲目用 -1，等于在赌浏览器怎么算隐式列数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
