grid-column: 1 / -1 能占满整行，因-1指向容器最右侧隐式网格线，起始于第1列、结束于最后一列之后，不依赖列数且语义清晰；span语法如1 / span 100效果等效但更易读。
grid-column: 1 / -1 为什么能占满整行
在 display: grid 容器中，某一项要横跨全部列，本质是让它的列起始线从第一列开始、列结束线落到最后一列之后。而 -1 就代表网格容器最右侧的隐式网格线（即最后一列的右边线），所以 grid-column: 1 / -1 是最直接且语义清晰的写法。
- 它不依赖具体列数，列数增减时仍自动生效
- 比写死如
grid-column: 1 / 4更健壮（避免列数变化后失效） - 注意：必须确保父容器是
grid，且子项未被grid-column其他值覆盖
用 span 关键字替代数字更直观
如果只是想“占满当前行所有列”，用 span 语法更易读，尤其当列数不确定或由 grid-template-columns: repeat(auto-fit, minmax(...)) 动态生成时：
grid-column: 1 / span 100;
但要注意：span 100 并非真的跨 100 列，而是“尽可能往右延伸，直到撞上容器边界或下一个显式网格线”。实际效果等同于 1 / -1，但可读性更强，也更符合意图。
-
span后面的数字只要 ≥ 总列数，行为一致；太小则可能跨不满 - 若网格有
gap，span计算的是轨道数，不含 gap，不影响结果
常见踩坑：grid-column 被其他规则覆盖或失效
明明写了 grid-column: 1 / -1 却没占满，大概率是以下几种情况之一：
立即学习“前端免费学习笔记（深入）”；
- 父容器没有定义
grid-template-columns，导致隐式网格列数为 1 —— 此时-1指向第 2 条线，实际只占 1 列 - 该元素同时设置了
grid-area，它会覆盖grid-column - 使用了
grid-column-start但漏写了grid-column-end，导致默认为auto，无法跨列 - CSS 优先级问题：比如类名权重低，被其他选择器中的
grid-column覆盖
响应式下保持占满整行的稳妥写法
在媒体查询中列数变化频繁时，硬编码列数极易出错。推荐统一用 1 / -1 或 span，并配合 grid-auto-flow: dense 避免空隙干扰布局流：
@media (max-width: 768px) {
.header {
grid-column: 1 / -1;
}
}
如果该元素还参与行方向排列（比如和其它项共处同一行），需确认它没被 grid-row 锁定在某一行，否则可能被挤到下一行才触发占满逻辑。
真正容易被忽略的是：当使用 grid-template-areas 时，grid-column 会被完全忽略 —— 这种情况下必须改用 grid-area 显式声明区域名，并确保该区域横跨全部列名。
