display: none 是唯一安全的选择，因为它使元素彻底退出网格项列表，Grid 引擎自动重排剩余项、不留下空槽，而 visibility: hidden 等仍占位导致布局错乱和 JS 测量失准。
在 CSS Grid 中隐藏网格项，必须用 display: none，不能靠 visibility: hidden 或仅调列定义；否则布局会错乱、JS 测量失准、空白槽残留。
为什么 display: none 是唯一安全的选择
Grid 子元素默认是网格项（grid item），它的存在直接影响轨道（track）分配和重排逻辑：
-
visibility: hidden或opacity: 0下，元素仍参与定位、占位、触发重排，getBoundingClientRect()返回真实尺寸，JS 容易误判可见性 -
display: none让元素彻底退出网格项列表，Grid 引擎自动重新计算剩余项分布，不留下空槽 - 一旦设了
display: none，该元素上的grid-column、grid-row等定位声明全部失效，不再影响布局流 - 注意：它不会自动销毁内部定时器、
IntersectionObserver或地图实例——需 JS 主动清理
隐藏后网格结构塌陷？用 grid-column: span N 补位
直接 display: none 某个子项，其原本占据的列/行轨道会被回收，导致后续项“掉坑”或缩成一条线。例如两列布局 grid-template-columns: min-content auto，隐藏第一项后，第二项会退到第 1 列并因无内容坍缩。
正确做法是让可见项主动接管被隐藏项的轨道空间：
立即学习“前端免费学习笔记（深入）”；
- 对目标项加
display: none - 对其相邻兄弟（或指定项）加
grid-column: span 2（数值对应原列数） - 若列数是
repeat(3, 1fr)，就得写span 3，不是固定写 2 - 不要改
grid-template-columns—— 补位靠子项自身跨列，而非重定义容器模板
响应式隐藏要同步调整容器结构
只在媒体查询里对某个类设 display: none 不够，父容器的 grid-template-columns 若仍按多列定义，剩余项可能被拉伸、错位或隐式分配到错误轨道。
- 小屏下建议把多列退化为单列：
grid-template-columns: 1fr - 若用了
grid-template-areas，隐藏某区域后，必须从模板字符串中移除对应命名，否则空白区域仍在 - 确保
@media内选择器权重 ≥ 基础样式（比如基础是.layout .sidebar，媒体查询里也得写全，不能只写.sidebar） - 检查
<meta name="viewport">是否缺失——没有它，移动端媒体查询可能完全不触发
想加动画？display: none 不支持过渡
如果目标不是“彻底移除”，而是“视觉收起 + 可唤出”（比如侧边栏滑入），display: none 无法配合 transition 动画。
- 必须脱离文档流：给目标元素加
position: fixed或position: absolute - 用
transform: translateX()或max-height+overflow: hidden控制显隐 - 此时需手动管理焦点、键盘导航和屏幕阅读器状态，
display: none自带的可访问性语义会丢失
真正难的不是加 display: none，而是判断该不该删轨道、要不要补位、有没有 JS 副作用——这些细节一漏，UI 就会悄悄错位或卡死。
