grid-column: 1 / -1 有时不生效，最常见的原因是父容器没有显式设置 grid-template-columns，这会导致 -1 指向隐式网格中的第二条线，而不是最后一列右侧；另外，还要确认目标元素确实是网格容器的直接子元素，并且当前浏览器支持这种 CSS Grid 语法。
grid-column: 1 / -1 不生效，多半是父容器没有设置 grid-template-columns
浏览器在解析 grid-column: 1 / -1 时，依赖的是显式定义的列轨道。如果父容器只写了 display: grid，却没有声明 grid-template-columns，就会进入“自动列”模式。在这种情况下，-1 指向的是隐式网格的第二条竖线，也就是默认仅有 1 列，而不是你预期中的“最后一列右侧”。最终结果往往是子元素只能占据一个网格单元，甚至出现位置异常、错位或内容溢出。
排查方法很简单：打开 DevTools → Computed 面板 → 查看 gridTemplateColumns 的值。如果显示为 none 或空字符串，就说明列定义实际上没有生效。
- 必须显式声明列，例如：
grid-template-columns: repeat(3, 1fr)→ 这时-1指向第 4 条线，1 / -1才能真正横跨整行 - 如果使用
auto-fit或auto-fill，要确认容器宽度足以生成多列；否则仍然只会形成 1 列，-1也就等同于2 - 不要在同一个元素上同时写
grid-column: 1 / -1和grid-column-start: 2，因为后者会覆盖前者，导致布局结果与预期不符
设置了 grid-template-columns，但 -1 还是不对？检查是否混用了 auto 和 fr
像 grid-template-columns: auto 1fr 1fr 这样的混合写法，可能会让 -1 的定位变得不够稳定。IE11 和部分旧版本 Safari 对 auto 与 fr 混合轨道的支持较差，即使在现代浏览器中，也可能因为隐式轨道的计算差异，造成 -1 落点偏移。
更稳妥的方式，是尽量统一使用可预期、便于计算的列单位：
- 固定列宽组合：
grid-template-columns: 200px 1fr→ 此时-1会明确指向第 3 条线 - 响应式布局建议优先使用
repeat(auto-fit, minmax(300px, 1fr)))，它会根据可用空间动态生成列数，-1也会始终指向当前实际存在的最后一列右侧 - 避免使用
repeat(2, repeat(3, 1fr))这类嵌套repeat()写法，因为浏览器通常会直接静默忽略整条声明
子元素不是直接子项时，grid-column: 1 / -1 会完全失效
grid-column 和 grid-row 只对网格容器的**直接子元素**生效。如果你的 DOM 结构类似：
.target 实际上是孙节点，这种情况下它设置的 grid-column: 1 / -1 基本等于没写，不会产生任何网格定位效果。
这类问题在 React 高阶组件、UI 框架自动包裹的 wrapper 层，或者开发时不小心多嵌套了一层 div 的场景中非常常见。
- 首选修复方案：扁平化 DOM 结构，让目标元素直接成为
.grid的子节点 - 备选方案：使用
subgrid（Chrome 115+、Firefox 111+ 已支持），但需要提前评估浏览器兼容性 - 临时解决办法：给中间 wrapper 设置
display: contents，不过它会让 wrapper 丢失盒模型特性，使用时要特别谨慎
在 IE11 或旧版 Safari 中，grid-column: 1 / -1 很可能天然失效
IE11 完全无法识别 grid-column: 1 / -1，而且 Autoprefixer 也不会自动把它转换成兼容写法。因为 -ms-grid-column-span 只接受正整数，不支持负值，也不支持 span 关键字。
旧版 Safari（≤15.3）虽然理论上支持 1 / -1，但如果同时混用了 grid-template-areas，整条规则有可能会被浏览器直接跳过。
- IE11 需要手动换算列线位置：例如在 3 列布局里，应写成
grid-column: 1 / 4，并配合display: -ms-grid使用 - 旧版 Safari 建议移除
grid-template-areas，改用数字线定位：grid-column: 1 / -1搭配显式的grid-template-columns - 不要指望通过
@supports (display: grid)给 IE 提供 fallback，因为 IE 对整个 at-rule 都无法识别
真正容易出错的，并不是记住 grid-column: 1 / -1 这条语法本身，而是每次使用前先确认三件关键的事：父容器是否真的是 grid、列轨道有没有显式定义、目标元素是不是直接子节点。只要漏掉其中任何一点，-1 就可能悄悄指向一个完全出乎你意料的位置。
