在 CSS Grid 布局中，当使用 display: none 隐藏某个网格项时，其占据的轨道（track）会消失，导致 grid-template-columns 重新计算——但可通过 grid-column: span N 显式声明剩余项的跨列行为，使其“接管”被隐藏项的轨道空间，从而避免动态修改模板定义。
在 css grid 布局中，当使用 `display: none` 隐藏某个网格项时，其占据的轨道（track）会消失，导致 `grid-template-columns` 重新计算——但可通过 `grid-column: span n` 显式声明剩余项的跨列行为，使其“接管”被隐藏项的轨道空间，从而避免动态修改模板定义。
CSS Grid 的一个常见误解是：隐藏子元素（如 display: none）不应影响网格轨道结构。但实际上，display: none 会使该网格项完全脱离文档流，Grid 布局引擎会忽略它——包括它原本“占位”的列轨道。因此，原 grid-template-columns: min-content auto 中的 min-content 列一旦对应项被隐藏，整个第一列轨道就会坍缩，后续项自动回填至第 1 列，导致 auto 列因无内容而不可见（尤其当第二项本身无显式宽高或内容时）。
✅ 正确解法不是修改 grid-template-columns，而是让可见项主动跨越被隐藏项所占的列数。
以两列布局为例（grid-template-columns: min-content auto），当第一个子项隐藏时，第二个子项应从第 1 列起跨 2 列：
.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 时，让 .two 跨两列 */
.grid.hide-first .one {
display: none;
}
.grid.hide-first .two {
grid-column: span 2; /* 关键：强制占据全部两列宽度 */
}
<div class="grid">
<div class="one"></div>
<div class="two"></div>
</div>
<!-- 触发切换 -->
<button onclick="document.querySelector('.grid').classList.toggle('hide-first')">
Toggle First Item
</button>
? 关键原理说明：
- grid-column: span 2 并非指定绝对列号，而是声明该元素应横跨 2 个网格列轨道（无论这些轨道是否被其他项显式占据）；
- 即使 .one 已 display: none，.two 仍能基于原始模板定义（2 列）进行跨列，从而自然填充整行宽度；
- 此方案完全不依赖 JavaScript 修改 CSS 变量或内联 grid-template-columns，语义清晰、性能高效、可复用性强。
⚠️ 注意事项：
- 不要使用 visibility: hidden 或 opacity: 0 替代 —— 它们保留布局空间，无法触发“第二项扩展”效果；
- 若网格项顺序不固定（如通过 order 重排），需确保 + 或 ~ 选择器能准确定位相邻项，或改用 :has()（现代浏览器支持）增强鲁棒性；
- 对于更复杂布局（如多行、多列隐藏），可结合 grid-row: span N 与 :nth-child 等组合控制，核心逻辑不变：用显式跨轨声明替代隐式模板重算。
总结：Grid 的列模板本就不该为可见性状态“动态妥协”。通过 grid-column: span 主动声明可见项的轨道占用范围，既尊重了原始布局意图，又实现了轻量、声明式的可见性切换——这才是符合 CSS Grid 设计哲学的优雅解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
