在 CSS Grid 布局中，仅通过 display: none 隐藏某个子项会导致其占据的网格轨道被自动“回收”，使后续元素无法自然撑满原列结构；本文介绍如何利用 grid-column: span N 动态扩展可见元素的列跨度，从而在不修改 grid-template-columns 的前提下实现视觉上的无缝切换。
在 css grid 布局中，仅通过 `display: none` 隐藏某个子项会导致其占据的网格轨道被自动“回收”，使后续元素无法自然撑满原列结构；本文介绍如何利用 `grid-column: span n` 动态扩展可见元素的列跨度，从而在不修改 `grid-template-columns` 的前提下实现视觉上的无缝切换。
当使用 display: none 隐藏 Grid 容器中的某个子元素时，CSS Grid 规范会将其完全从布局流程中移除——不仅内容不可见，其所占的网格轨道（track）也会被压缩或重新分配。这与 visibility: hidden 或 opacity: 0 的行为截然不同：后者保留空间，而 display: none 会触发网格重排，导致 grid-template-columns 的定义“失效”于剩余元素。
例如，在如下两列布局中：
<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; }若直接对 .one 应用 display: none，.two 将退回到第 1 列（即 grid-column: 1），并因 grid-template-columns: min-content auto 中第一列无内容而坍缩为极窄宽度，视觉上几乎消失。
立即学习“前端免费学习笔记（深入）”；
✅ 正确解法是：让可见的兄弟元素主动跨越被隐藏项原本所在的列轨道。
借助相邻兄弟选择器（.one + .two）和 grid-column: span 2，可强制 .two 占据全部两列宽度，从而无视 .one 的隐藏状态，稳定维持整体网格结构：
.grid:hover .one {
display: none;
}
.grid:hover .one + .two {
grid-column: span 2; /* 关键：跨两列，覆盖原 first 列 + 自身列 */
}? 注意：span 2 表示跨越 2 个网格轨道（非 2 个网格线），在此例中恰好对应 grid-template-columns 定义的两列。若列数变化（如 repeat(3, 1fr)），需同步调整 span 值。
该方案优势显著：
- ✅ 无需 JavaScript 操作 grid-template-columns；
- ✅ 不依赖 visibility 或 opacity 等伪隐藏方式（避免交互/可访问性问题）；
- ✅ 兼容所有现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+）；
- ✅ 可拓展至多列场景（如隐藏中间项时，用 + 或 ~ 选择器定位目标并 span N）。
⚠️ 注意事项：
- 若 .two 后还有其他子元素，需确保它们的 grid-column 不发生冲突（建议显式设置起始位置，如 grid-column: 1）；
- grid-column: span 2 要求容器至少存在 2 列轨道，否则行为未定义；
- 避免在响应式场景中混用 minmax() 或 fit-content() 等动态函数与 span，可能导致意外交互。
总结：Grid 的“轨道稳定性”不由子元素可见性保障，而由显式轨道声明与子项定位共同决定。display: none + grid-column: span N 组合，是以声明式方式实现“逻辑隐藏但物理占位”的最佳实践。
