grid-column: 1 / -1 是让子项横跨整行的唯一可靠写法，它强制子项从第一列线开始延伸至最后一列线，真正占据所有列轨道（含隐式列），而 width: 100% 等在 grid 中无效。
grid-column: 1 / -1 是让子项横跨整行的唯一可靠写法
它强制该子项从容器最左侧列线（1）开始，延伸至最右侧列线（-1），无论你用 repeat(auto-fit, minmax(200px, 1fr))) 还是固定列数定义，都生效。这不是“视觉上撑满”，而是真正占据所有列轨道——包括那些由 grid-auto-columns 生成的隐式列。
常见错误是写 width: 100% 或 flex-basis: 100%：Grid 中这两个属性完全无效，浏览器会静默忽略；更糟的是，如果同时写了 display: flex 或 flex: 1，反而破坏 Grid 布局逻辑，导致错位。
注意：gap 不影响列线编号，但会实际减少该项可用宽度——它的最终宽度 = 容器内宽 − 所有列间 gap 总和。
grid-row: 1 / -1 跨整列？不，那是跨整行高度
别被“列”字误导：grid-row 控制的是**行方向**的跨度，grid-row: 1 / -1 表示从第一行线到最后一行线，即纵向占满整个网格容器的高度（前提是容器有明确高度约束，或设置了 grid-template-rows）。
如果你没定义 grid-template-rows，只靠内容撑出隐式行，-1 可能指向不可预期的位置——此时更稳妥的做法是：给容器设 min-height: 100vh 或显式 grid-template-rows: 1fr 2fr auto，再用 grid-row: 1 / -1。
不存在 grid-row: 1 / span all 这种写法，浏览器直接丢弃整条规则；span 后只能跟正整数，不能是单词。
用命名线替代数字线号，避免响应式翻车
当网格结构随断点变化（比如桌面 4 列 → 移动端 2 列），硬写 grid-column: 1 / 5 会失效——因为移动端只有 3 条列线（1–3）。
改用命名线就稳得多：
.container {
grid-template-columns: [full-start] 1fr [full-end];
}
.full-width {
grid-column: full-start / full-end;
}
这样不管列数怎么变，只要命名线存在，grid-column 就始终有效。命名线也适用于行：grid-template-rows: [sidebar-top] 1fr [sidebar-bottom] + grid-row: sidebar-top / sidebar-bottom 比 1 / -1 更语义清晰、调试友好。
跨行跨列时对齐和内容溢出容易被忽略
grid-column: 1 / -1 只控制区域占用，不控制内部内容如何排布。默认它会遵循容器的 justify-content，但若你想单独调整这一项，得加 justify-self: center 或 margin-left: auto; margin-right: auto（后者在旧版 Safari 里可能失效）。
另一个隐形坑：如果该项有 padding、大字号或 line-height，又没设 box-sizing: border-box，内容可能溢出或被裁剪——尤其当父容器设置了 overflow: hidden。这时候不是 Grid 失效，而是尺寸计算没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
