在 CSS Grid 中隐藏特定单元格，必须用 display: none 配合 @media，不能只改 grid-template-columns 或依赖 visibility: hidden；因为 display: none 让元素彻底退出网格项列表，避免占位和重排问题，而 visibility: hidden 仍参与布局且影响 JS 测量。
直接结论：在 CSS Grid 中隐藏特定单元格，必须用 display: none 配合 @media，不能只改 grid-template-columns 或依赖 visibility: hidden。
为什么 display: none 是唯一安全的选择
Grid 布局中，每个子元素默认是一个网格项（grid item）。如果只是设 visibility: hidden 或 opacity: 0，它仍参与网格定位、占位、触发重排，主内容可能被挤偏或留白；而 display: none 会让该元素彻底退出网格项列表——Grid 自动重新计算剩余项的分布，不留下空槽。
-
display: none后，grid-column和grid-row设置失效，不再影响布局流 -
visibility: hidden下，getBoundingClientRect()仍返回真实尺寸，JS 测量逻辑容易误判 - 若该单元格内含定时器、
IntersectionObserver或地图实例，display: none不会自动销毁它们——需 JS 主动清理
@media 断点设置常见翻车点
写了 @media (max-width: 768px) { .sidebar { display: none; } } 却没生效？大概率是断点条件没命中或规则被覆盖。
- 优先用
max-width: 767px，避开 iPad 竖屏（768px）与部分安卓平板的边界模糊问题 - 避免写
device-width：iOS Safari 和 Chrome DevTools 模拟器中常返回错误值 - 确保媒体查询内选择器权重 ≥ 基础样式，例如基础规则是
.layout .sidebar，媒体查询里就得写.layout .sidebar，而不是仅.sidebar - 检查
<meta name="viewport">是否缺失——没有它，移动端媒体查询可能完全不触发
Grid 容器结构必须同步调整
只对某个单元格设 display: none 不够，父容器的 grid-template-columns 或 grid-template-rows 若仍按“两列”定义，剩余项可能被强行拉伸或错位。
立即学习“前端免费学习笔记（深入）”；
- 小屏下建议把多列结构退化为单列：
grid-template-columns: 1fr - 别只改列数却保留已隐藏的单元格 DOM——否则它会被隐式分配到第一列，撑高行高或重叠内容
- 若使用
grid-template-areas，隐藏某区域后，对应命名需从模板中移除，否则空白区域仍在
想加滑出动画？纯 CSS 方案有硬限制
如果目标不是“彻底移除”，而是“视觉上收起+可唤出”（比如汉堡菜单联动侧边栏），display: none 无法过渡。此时得换思路：
- 必须脱离文档流：给侧边栏加
position: fixed或absolute，再配合transform: translateX(-100%) - 用
<input type="checkbox">+:checked触发状态，避免 JS 介入 - 注意：这种方案下，
display: none和transform不能混用——前者会切断渲染，后者失效
真正难的不是写那几行 @media，而是判断哪些单元格该隐藏、哪些交互逻辑必须随隐藏同步停掉。尤其当 Grid 里嵌了第三方组件（如地图、图表、视频播放器），display: none 只是表层动作，背后资源释放得靠 JS 补刀。
