grid-column跨列错位是因隐式行生成与网格线未显式定义所致；需配合grid-row、显式声明grid-template-rows/columns，并在响应式与IE11中分别采用命名线、正整数线号及-ms-grid-column-span回退。
grid-column 跨列时为什么导航项错位了
直接写 grid-column: 1 / -1 想让某个菜单项横跨全部列，结果它压住了下面的行，或和相邻项重叠——这不是 CSS Grid 的 bug，而是没处理好显式网格定义和隐式行生成的关系。Grid 默认按内容自动创建隐式行，但跨列项如果没配合 grid-row 控制纵向位置，就容易挤占后续内容的空间。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式声明
grid-template-rows（哪怕只设一行：grid-template-rows: auto），避免隐式行不可控 - 对需要跨列的导航项（比如“热门推荐”标题栏），明确指定
grid-row，例如grid-row: 1，把它钉在第一行 - 用
grid-column: 1 / -1前，确认容器有足够列数；若列数由grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))))动态生成，-1才真正指向末尾线；若用固定列如1fr 1fr 1fr，则grid-column: 1 / 4更稳妥
多列导航菜单中 hover 下划线不随列宽自适应
用 grid-column 排出多列后，给每个 <a></a> 加 border-bottom，结果下划线长度固定、不贴文字右端，尤其在响应式缩放时明显割裂——这是因为 Grid 容器默认不传递 text-align 或内联尺寸行为，且 display: contents 类样式会破坏伪元素定位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把下划线改用
::after伪元素实现，并设width: 100%+transform: scaleX(0)配合transition - 确保导航项本身是块级（
display: block），否则100%宽度参考的是内容盒而非网格轨道 - 如果菜单项用了
justify-self: center居中，伪元素需额外加left: 0和right: 0来撑满可用空间
响应式断点下 grid-column 跨列失效
桌面端用 grid-column: 1 / -1 让“分类导航”横跨三列，到了平板却只占一列，甚至溢出容器——常见原因是媒体查询里只改了 grid-template-columns，但没同步更新跨列项的 grid-column 值，导致原 1 / -1 在新列数下指向错误轨道线。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免在媒体查询中重复写
grid-column，改用命名线：定义grid-template-columns: [nav-start] 1fr [nav-end]，然后统一用grid-column: nav-start / nav-end - 如果必须用数字线，断点内重置为具体值，例如桌面
grid-column: 1 / 4，平板改为grid-column: 1 / 3（对应两列） - 用
grid-auto-flow: dense时要格外小心，它可能让跨列项被“插队”，优先关闭该属性再调试布局
IE11 兼容时 grid-column 不生效的替代方案
写了 grid-column: 1 / -1，但在 IE11 完全无效，连基础多列都塌成单列——IE11 的 CSS Grid 实现不支持负值线（-1）、不识别 auto-fit，且对 grid-column-end 的解析极脆弱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 放弃
-1，全部改用正整数线号，例如grid-column: 1 / 4，并确保grid-template-columns明确声明三列 - 用
@supports (display: -ms-grid)单独给 IE11 写回退规则，里面用-ms-grid-column-span替代grid-column - 若项目必须强兼容，考虑用
float+calc()做降级，但注意 IE11 对calc()内空格敏感，必须写成calc(100% / 3 - 10px)而非calc(100% / 3 - 10 px)
跨列不是加个 grid-column 就完事，关键在网格线是否真实存在、是否被其他规则覆盖、以及浏览器是否真能解析你写的那个数字。最常被忽略的是：动态列数下 -1 并不总是“最后一列线”，它取决于 grid-template-columns 是否显式定义，而不是你肉眼看到的列数。
