标题不跨列是因为父容器未定义grid-template-columns，导致-1指向隐式网格末尾而非预期最后一列；必须显式设置列轨道，如repeat(3,1fr)，此时-1才指向第4条线。
grid-column: 1 / -1 为什么标题不跨列？
常见现象是写完 grid-column: 1 / -1，标题却只占一格，甚至错位或溢出。根本原因不是语法错，而是父容器没设列轨道——grid-template-columns 缺失时，浏览器按“自动列”处理，-1 指向的是隐式网格末尾（可能只是第2列），而非你预期的“最后一列”。
- 必须显式定义列数，比如
grid-template-columns: repeat(3, 1fr)，此时-1才指向第4条线（即第3列右侧） - 若用
auto-fit或auto-fill，要确保内容足够触发多列，否则仍可能只有一列 - 别在子项上直接写
grid-column: 1 / -1同时又设grid-column-start: 2，后者会覆盖前者
标题跨列后内容项错位或换行异常
标题占满整行后，后续列表项没对齐到下一行起始，反而挤在标题下方同一行——这是 grid 默认按「行流」排列，但未控制行轨道导致的。grid 不像 flex 那样自动换行，它严格按轨道线定位。
- 给标题加
grid-row显式指定行，比如grid-row: 1，再给第一个内容项设grid-row: 2，强制它从第2行开始 - 更稳妥的做法是用
grid-auto-flow: row（默认值）配合grid-row: auto，但前提是所有内容项不手动指定grid-row - 如果内容项用了
grid-column: span 2等跨度，要确认总列数能整除，否则末尾项可能被挤到新行且不对齐
响应式下跨列标题断层或重复
在媒体查询里改了列数（比如从 repeat(3, 1fr) 变成 repeat(2, 1fr)），标题突然变窄、或出现两行标题——因为标题的 grid-column: 1 / -1 仍生效，但列轨道变了，-1 指向的位置已不同，而其他项未同步重排。
- 标题本身不用响应式重写
grid-column，它始终应横贯当前所有列；重点是确保列定义和内容项的跨度逻辑一致 - 避免对标题单独写
@media改grid-column，容易和父容器列定义冲突 - 如果用
grid-template-areas布局，标题区域名（如"header"）需在每个断点里重新定义，比纯线性定位更可控
IE 兼容场景下 grid-column: 1 / -1 完全失效
IE10–11 不支持 -1 这种负值语法，会直接忽略该声明，标题退回默认单格。这不是 bug，是规范差异——IE 只认正整数线号。
立即学习“前端免费学习笔记（深入）”；
- 安全写法是补一层兼容：先写
grid-column: 1 / -1，再紧跟着写grid-column: 1 / 4（假设最多3列），IE 会读后面那行，现代浏览器则用前一行 - 若列数动态（如
auto-fit），无法硬编码终点，就得放弃 IE 或改用display: flex+flex-wrap模拟，标题设width: 100% - 注意
grid-column-end: -1单独写也无效，必须成对出现（grid-column: 1 / -1或grid-column-start / grid-column-end）
负索引看似简单，但它的行为完全依赖于显式列定义和渲染上下文，漏掉任意一环，-1 就不是“最后一列右边”，而是“某个意外位置”。
