Grid子项隐藏时应避免display:none导致轨道塌陷，可用grid-column:span跨列填补、visibility:hidden+place-self收缩占位，或grid-template-areas严格对齐列数，三者需协同咬合以防空白复现。
display: none 会让 Grid 子项彻底退出网格流程，导致其所在轨道“塌陷”或被邻项侵占——这不是折叠留白，是结构破坏。真要自动折叠留白区域，得让隐藏行为不干扰轨道定义，同时让可见项主动接管空间。
用 grid-column: span N 让兄弟元素跨列填补
当某个子项需隐藏但列模板不能变（比如侧边栏 + 主内容两列布局），不能直接 display: none，而应让后续项跨过它原本占据的轨道：
- 假设
.sidebar在第 1 列，.main在第 2 列，列定义为grid-template-columns: 240px 1fr - 隐藏时，给
.main加grid-column: span 2，它就自动撑满两列宽度 - 关键点：必须用相邻兄弟选择器（如
.sidebar:hidden + .main）或 JS 动态加类控制，否则样式无法响应状态 - 注意
span 2是跨越 2 个轨道，不是 2 条线；若列数变化（如从 2 列变 3 列），span值必须同步更新
用 visibility: hidden + place-self 保留轨道但收窄视觉占用
如果必须保留隐藏项的 DOM 和轨道位置（比如动画过渡、无障碍需求），visibility: hidden 比 display: none 更安全，但默认仍占满轨道——需配合对齐重置：
- 给隐藏项设
visibility: hidden同时加place-self: start，它会收缩到左上角起点，不拉伸 - 再配
width: 0; height: 0; overflow: hidden;，彻底消除视觉占用和点击热区 - 此法适合需要保持网格线稳定、又不想 JS 操控 DOM 的场景（如 CSS-only 折叠面板）
- 缺点：空白区域仍是“物理存在”，只是不可见；若需背景色或边框占位，还得额外加伪元素
响应式下 grid-template-areas 必须列数对齐，否则留白失控
在媒体查询中切换布局时，grid-template-areas 字符串的每行列数不一致，会导致未声明区域掉进隐式网格，形成不可控空白块：
立即学习“前端免费学习笔记（深入）”；
- 桌面端写
"header header header" "nav main aside"（3 列） - 移动端必须写成
"header header header" "main main ."或"header header header" "main main main"，保持每行都是 3 个 token - 用
.显式占位比留空更可靠；漏写一个.，DevTools 里该属性会被划掉，整行退化为流式布局 - 检查技巧：在浏览器 Grid 面板中勾选 “Show line numbers”，看隐藏项是否落在了
row: implicit区域
真正难的不是让留白“消失”，而是当隐藏逻辑嵌套在响应式、动画、JS 状态切换中时，grid-column 跨越、grid-template-areas 对齐、minmax() 收缩这三者稍有不同步，空白就会以各种形态复现——它们不是孤立配置，而是一组必须咬合的齿轮。
