grid-column: 1 / -1 要求父容器显式定义 grid-template-columns，否则因列线不存在而静默失效；命名线（如 full-start / full-end）可规避动态列数下的线号不可靠问题。
直接用 grid-column: 1 / -1 即可横跨整行，但前提是父容器必须有显式定义的列轨道（grid-template-columns），否则它会静默失效——元素看起来“没跨”，其实根本没生效。
为什么 grid-column: 1 / -1 有时不工作
这不是语法错，而是线号不存在导致的静默回退。比如容器只写了 display: grid，没写 grid-template-columns，浏览器只会生成隐式列轨道，且线号数量取决于内容顺序和尺寸，不可预测。此时 1 / -1 中的 -1（最后一根列线）很可能并不存在。
- 打开 DevTools → Elements → 勾选 Grid overlay，看目标线是否被画出
- 若没画出第 1 条或最后一条竖线，说明
grid-template-columns缺失或定义过窄 - 即使用了
grid-auto-columns，它只影响隐式列宽度，不创造显式线号
grid-column: span 2 和 1 / -1 的本质区别
span 2 是相对行为：从当前自动放置位置起向右占两列；而 1 / -1 是绝对定位：强制从最左线拉到最右线，无视中间空缺或已有元素。
-
grid-column: 1 / -1要求你“知道”最右线在哪——它由grid-template-columns显式定义的列数决定（如repeat(4, 1fr)→ 共 5 条竖线，-1指第 5 条） - 响应式下线号会变：桌面端
repeat(6, 1fr)有 7 条线，移动端改成repeat(2, 1fr)就只剩 3 条，1 / -1依然有效，但跨的是新布局下的“全部” -
grid-column: span 2在空缺多时可能跳到很远的位置，不适合做“通栏标题”这类强语义需求
动态列数下如何安全实现通栏效果
当列数由 JS 动态生成（比如根据屏幕宽度切换 repeat(3, 1fr) / repeat(2, 1fr)），不能硬编码线号，但也不能放弃显式定义。稳妥做法是统一用命名线 + 1 / -1 组合。
- 在容器中定义：
grid-template-columns: [full-start] repeat(var(--cols, 3), 1fr) [full-end] - 通栏元素写：
grid-column: full-start / full-end—— 命名线不受列数变化干扰 - 若必须用数字线号，确保 JS 更新列数时同步更新 CSS 变量，并配合媒体查询兜底
- 避免混用：
grid-column: 1 / span 4合法，但grid-column: span 4 / -1无效，整条规则会被丢弃
真正容易被忽略的点是：跨满整行这件事，从来不是靠“撑开”实现的，而是靠“精准锚定两条真实存在的线”。没有显式轨道，就没有可靠线号；没有可靠线号，1 / -1 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
