css grid 本身不控制显隐，必须用 display: none 彻底移除元素以实现不占空间、不可交互、不被辅助技术感知；仅改 grid-column 或 grid-template-columns 无法满足隐藏核心诉求。
Grid 布局本身不负责显隐逻辑，必须靠 display 配合媒体查询来真正隐藏/显示模块——只改 grid-column 或 grid-template-columns 不够，DOM 还在、占位还在、焦点还在。
为什么不能只靠 Grid 列定义控制显隐
很多人试过在小屏下把侧边栏的 grid-column 改成 1，以为它就“进主内容区”了，实际不是：它仍作为网格项参与布局计算，会撑高容器、影响滚动、键盘 Tab 仍能聚焦到里面，屏幕阅读器也照读不误。
-
grid-column: 1只是重定位，不等于移除渲染流 - 隐藏模块的核心诉求是“不占空间 + 不可交互 + 不被辅助技术感知”，只有
display: none能同时满足 - Grid 的列模板（如
grid-template-columns: 250px 1fr）只是划分轨道，不决定项是否渲染
正确写法：媒体查询中用 display: none 彻底移除
移动端断点（如 max-width: 767px）下，对要隐藏的模块（比如 .sidebar）直接设 display: none，同时调整主容器的 grid-template-columns 为单列：
.sidebar { display: none; }
.main-layout { grid-template-columns: 1fr; }
@media (min-width: 768px) {
.sidebar { display: block; }
.main-layout { grid-template-columns: 250px 1fr; }
}
- 别依赖
visibility: hidden或opacity: 0替代 —— 前者仍占位，后者仍可点击、仍触发 Tab 键序 - 如果模块内含地图、视频、定时器等资源，
display: none不会自动销毁它们，JS 层需监听断点变化并手动清理 - 移动优先写法更可靠：默认
.sidebar { display: none; }，大屏再设回block或grid
多级子菜单隐藏必须逐层控制 display
Grid 中嵌套的子菜单（如 .submenu）若仅靠父级 display: none 并不能保证完全退出渲染流 —— 如果子菜单本身是独立网格容器，它可能仍会生成隐式网格线或触发布局计算。
- 小屏下统一设
.submenu { display: none; } - 展开时只对当前路径上的那一级加
.submenu.active { display: grid; } - JS 控制展开时，必须同步清除同级其他
.submenu的active类，否则多个子菜单可能同时显示 - 别用
visibility: hidden模拟隐藏 —— 它不会释放空间，键盘焦点仍会卡在不可见的项里
display 值无法用 CSS 变量动态设置
你不能写 @media (min-width: var(--breakpoint-md)) { .sidebar { display: var(--display-value); } } —— 浏览器压根不解析，规则静默失效。这是 CSS 规范限制，不是语法错误。
-
display只接受字面量值（none、grid、flex等），不支持变量插值 - 可行替代：用
data-属性驱动类名，比如[data-sidebar="hidden"] .sidebar { display: none; }，JS 动态更新属性值 - Safari 15.3 及更早版本不支持媒体查询中使用
var(--breakpoint)，必须双写：@media (min-width: 768px), (min-width: var(--breakpoint-md))
真正容易被忽略的是：Grid 模块隐藏后，其内部 JS 实例、事件监听、IntersectionObserver 等并不会自动解绑。显隐切换不只是样式问题，更是生命周期管理问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
