侧边栏显隐必须用视口媒体查询而非容器查询，因其属页面级布局决策；小屏下应设 display: none 并调整 grid-template-columns 为单列，避免仅改列宽导致布局错乱。
display: grid 本身不支持容器查询（@container），它只响应视口（viewport）变化。如果你在调试时发现侧边栏没按预期隐藏，大概率是误用了容器查询语法，或混淆了视口媒体查询与容器查询的适用场景。
为什么不能直接用 @container 控制侧边栏显隐
CSS 容器查询要求目标元素显式声明 container-type（如 inline-size 或 size），且该元素必须是其子元素的“容器上下文”。但侧边栏通常位于根级布局容器中（如 .app 或 body 直接子元素），而这些元素极少被设为容器——浏览器不会自动将其识别为可查询容器。
更关键的是：侧边栏的显示/隐藏逻辑依赖的是用户设备的屏幕宽度、缩放比例和阅读意图，这些属于视口层面信号，不是某个局部容器的尺寸变化。强行套用容器查询反而会导致断点失效、样式不触发。
- 容器查询适合组件级响应，比如卡片内部头像尺寸随卡片宽度自适应
- 侧边栏属于页面级布局决策，必须用
@media (max-width: ...) - 若父容器本身宽度由 JS 动态控制（如拖拽调整），那应由 JS 触发类名切换，而非依赖 CSS 查询
grid-template-columns 在小屏下如何安全收起侧边栏
最简可靠的做法是在媒体查询中把两列结构改为单列，并确保侧边栏真正退出布局流：
- 用
display: none而非visibility: hidden或opacity: 0——前者移除渲染占位，后者仍参与布局计算 - 不要只改
grid-template-columns: 1fr却保留侧边栏 DOM；否则它会作为网格项被挤进第一列，可能撑高容器或重叠内容 - 如果侧边栏含定时器、IntersectionObserver 或地图实例，
display: none不会自动销毁它们——需 JS 配合清理
示例写法：
.layout {
display: grid;
grid-template-columns: 240px 1fr;
}
.sidebar { grid-column: 1; }
.main { grid-column: 2; }
<p>@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr;
}
.sidebar {
display: none; /<em> 必须加这行 </em>/
}
}</p>
想实现“滑出动画”但又不想写 JS？用 transform + :checked 纯 CSS 方案
如果目标是视觉上隐藏而非彻底移除（比如保留汉堡菜单唤出能力），可用复选框 + transform 模拟抽屉效果：
- 侧边栏需设
position: fixed或absolute，脱离文档流 -
transform: translateX(-100%)的基准是自身宽度，所以必须给.sidebar显式设width: 240px（不能只靠grid-column） - 过渡必须写在
.sidebar上，而不是媒体查询块内，否则动画不生效 - 移动端需防滚动穿透：打开时给
body加overflow: hidden，纯 CSS 无法做到，必须 JS 协作
这种方案本质是“伪隐藏”，DOM 仍在、事件监听器照常运行，仅视觉位移——性能和可访问性不如真 display: none。
真正容易被忽略的点：断点值不是写死的魔法数字。768px 是常见平板上限，但 iPhone SE（320px）和折叠屏（如 Galaxy Z Fold 展开后 1536px）会让这个值失效。更稳妥的方式是结合 max-height 媒体查询（检测是否为触屏）或用 hover: none 辅助判断输入方式，但核心逻辑仍得锚定在视口媒体查询上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
