display: none 会彻底移除 Grid 子项并坍缩其占用的列轨道，导致布局错乱；需配合 grid-column: span N 或调整 grid-template-columns 来维持结构。
直接用 display: none 隐藏 Grid 子项，但不配套调整其余项的定位，布局一定会乱——因为被隐藏的项退出网格流后，其原本占位的列轨道会坍缩，后续项自动回填，导致宽度错乱、内容消失或重叠。
为什么 display: none 单独用会出问题
Grid 布局中，每个子元素默认是一个网格项。一旦设 display: none，它不仅不可见，还会从网格项列表中彻底移除——包括它“声明”过的列轨道（比如 grid-column: 1 对应的第一列）。如果父容器定义的是 grid-template-columns: min-content auto，而第一列的项被隐藏，那整个 min-content 轨道就没了，auto 列因无内容撑开而坍缩成极窄宽度，视觉上像“消失了”。
常见错误现象：
- 隐藏侧边栏后，主内容区宽度归零或严重变窄
- 卡片列表在小屏下只剩一列，但高度异常拉伸
- 使用
grid-template-areas时，隐藏某区域后模板里还留着空格
保持列模板不变：用 grid-column: span N 接管轨道
不改 grid-template-columns，而是让可见项主动跨列，填满被隐藏项原本占据的轨道空间。
立即学习“前端免费学习笔记（深入）”；
以两列布局为例：
.grid { display: grid; grid-template-columns: min-content auto; }
.one { grid-column: 1; }
.two { grid-column: 2; }
<p>/<em> 隐藏 .one 后，让 .two 跨两列 </em>/
.grid.hide-first .one { display: none; }
.grid.hide-first .two { grid-column: span 2; }关键点：
-
span 2表示跨越 2 个网格轨道（不是网格线），必须和原列数一致 - 若列数是
repeat(3, 1fr)，就得写span 3 - 不能依赖相邻兄弟选择器（如
.one + .two）在复杂嵌套中稳定生效，建议用类名控制更可靠
响应式场景下要同步调整容器结构
媒体查询里只隐藏单元格还不够，父容器的网格定义也得退化匹配——否则剩余项会被强行塞进未隐藏的轨道里，造成错位或撑高行高。
典型做法：
- 移动端断点（如
@media (max-width: 767px)）中，对要隐藏的模块设display: none - 同时把父容器的
grid-template-columns改为1fr（单列） - 如果用了
grid-template-areas，必须把对应命名从模板字符串里删掉，例如从"sidebar main"改成"main" - 确保
<meta name="viewport">存在，否则媒体查询可能完全不触发
display: none 的副作用必须手动处理
它让元素彻底退出渲染流，但也带来硬性约束：
- 内部的定时器、
IntersectionObserver、地图实例不会自动销毁，JS 必须监听断点变化并调用clearInterval或map.remove() - 父元素设了
display: none，子元素再设display: block无效——必须直接控制目标元素 - 屏幕阅读器跳过该元素，如果需要“视觉隐藏但语义保留”，得换用
clip-path: inset(100%)+position: absolute并配aria-hidden="false"
真正麻烦的不是怎么写 CSS，而是隐藏之后那些还在后台跑的 JS 实例和可访问性链路——它们不会因为你加了一行 display: none 就自动停摆。
