在 CSS Grid 布局中，仅通过 display: none 隐藏某个子项会导致其余可见项自动重新分配列轨道；本文介绍如何用 grid-column: span 2 结合相邻兄弟选择器，使剩余子项跨占被隐藏项的列空间，从而无需动态修改 grid-template-columns。
在 css grid 布局中，仅通过 `display: none` 隐藏某个子项会导致其余可见项自动重新分配列轨道；本文介绍如何用 `grid-column: span 2` 结合相邻兄弟选择器，使剩余子项跨占被隐藏项的列空间，从而无需动态修改 `grid-template-columns`。
CSS Grid 的强大之处在于其显式定义的轨道系统（如 grid-template-columns: min-content auto），但一个常见误区是：隐藏子元素 ≠ 移除其网格位置影响。实际上，当使用 display: none 隐藏某个 grid item 时，它不仅不可见，还会完全退出文档流和网格布局计算——Grid 规范明确要求浏览器“忽略该元素在所有轴上的贡献”，包括其占据的列轨道。因此，原本由两个子项分别填充的两列，会因第一个子项消失而坍缩为单列布局，导致第二个子项只能按 auto 轨道渲染（若内容为空，则可能不可见）。
要打破这一行为、实现「视觉隐藏但轨道保留」的效果，核心思路是：不让隐藏操作影响轨道分配逻辑，而是让剩余可见项主动接管被隐藏项的列空间。
✅ 推荐方案：利用 grid-column: span N + 相邻兄弟选择器（+）
该方法不依赖 JavaScript，纯 CSS 实现，且完全兼容原始 grid-template-columns 定义。关键在于：当 .one 被隐藏时，强制 .two 跨越全部两列（span 2），使其宽度自然撑满整个网格容器宽度。
立即学习“前端免费学习笔记（深入）”；
以下是完整可运行示例：
<div class="grid"> <div class="one"></div> <div class="two"></div> </div>
.grid {
display: grid;
grid-template-columns: min-content auto; /* 固定双列结构 */
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
.one {
width: 20px;
background-color: green;
}
.two {
background-color: cyan;
}
/* 悬停时隐藏第一个子项，并让第二个子项跨两列 */
.grid:hover .one {
display: none;
}
.grid:hover .one + .two {
grid-column: span 2; /* 关键：覆盖默认列定位，占据全部列轨道 */
}? 注意事项与进阶提示：
- grid-column: span 2 必须作用于紧邻 .one 的下一个子项（即 .two），且需确保 DOM 顺序与视觉顺序一致；
- 若存在多个后续子项，或需支持任意位置的隐藏/显示，建议改用 :has()（现代浏览器支持）或 JS 控制 grid-column-start/grid-column-end；
- 避免混用 visibility: hidden —— 它虽保留空间，但不会触发 display: none 的布局重排，也无法让 .two 自动扩展，故无法解决本题目标；
- 对于更复杂场景（如响应式切换、多列动态隐藏），可封装为 CSS 自定义属性（如 --hidden-col: 1）配合 grid-column: 1 / -1 或 clamp() 函数增强可维护性。
总结：CSS Grid 的列模板本身是静态声明，真正决定内容分布的是每个 item 的网格定位属性。通过精准控制 grid-column，我们能优雅绕过 display: none 带来的轨道重分配问题，在不侵入布局结构的前提下，实现灵活的可见性切换。
