transform是唯一能可靠实现侧边栏弹出覆盖的CSS方式，因为grid-template-columns不可动画、不支持滑出视口；仅靠其切换显隐会导致列坍缩裁剪、无动画、无法锁滚动，display:none或visibility:hidden使主内容不拉宽留白边，opacity:0仍占位可交互；必须配合position:fixed与translateX()实现物理移出视口并覆盖主内容。
transform 是唯一能可靠实现侧边栏弹出覆盖的 CSS 方式，grid-template-columns 本身不可动画、不支持滑出视口，纯 Grid 布局无法完成“弹出覆盖”这一交互效果。
为什么不能只靠 grid-template-columns 切换显隐
常见错误是用媒体查询把 grid-template-columns: 280px 1fr 改成 1fr 来“隐藏”侧边栏——这只会让列坍缩为 0 宽，内容被裁剪或挤变形，且无动画、无法锁 body 滚动、点击区域仍存在。
更糟的是：display: none 或 visibility: hidden 会让主内容区无法自动拉宽（Grid 轨道还在），常留白边；opacity: 0 不释放占位，侧边栏仍可聚焦、仍响应点击。
transform + position: fixed 是必须组合
侧边栏必须脱离文档流，才能真正“覆盖”主内容，不受滚动影响：
- 必须设 position: fixed，别用 absolute（否则滚动时跟着跑）
- 必须写全 top: 0; bottom: 0; left: 0;，只写 top: 0 在长页面里会截断
- 宽度固定，如 width: 280px，别依赖 grid-column 隐式尺寸
- 初始状态用 transform: translateX(-100%) 把它物理移出视口左侧
- 弹出时只切一个 class，里面仅含 transform: translateX(0)
Grid 容器与 transform 共存的关键约束
Grid 控制默认结构，transform 控制临时状态，二者要协同不打架：
- 侧边栏必须是 Grid 容器的直接子项
- Grid 容器（如 .layout）必须加 overflow: hidden，否则滑出部分会撑开横向滚动条
- 不要在侧边栏上同时写 grid-column: 1 和 width: 280px 再叠加 transform——transform 不影响 Grid 尺寸计算，但 overflow 不设好就会漏白
- 过渡只写 transition: transform .3s ease，别用 all，避免意外触发其他属性过渡
立即学习“前端免费学习笔记（深入）”；
移动端手势拖拽关闭时的坑
iOS Safari 对 transform + touchmove 有渲染延迟，松手后回弹错位很常见：
- 手势中动态设置 transform: translateX(Npx) 时，N 的最大值不能超过侧边栏实际宽度（用 getBoundingClientRect().width 读取最准）
- 如果侧边栏用了 minmax(250px, 280px)，松手判断阈值就得按最小值 250px 算，否则窄屏下拖不到就回弹
- 松手补全动画必须用 transition: transform .25s cubic-bezier(0.22, 0.61, 0.36, 1)，JS 动画库可能绕过 GPU 加速，导致卡顿
Grid 只负责划分结构，真正“弹出覆盖”的动作、动画、交互控制，全靠 transform 和定位配合完成。任何试图绕过这层、只靠 Grid 属性切换来实现抽屉效果的做法，最终都会在兼容性、性能或交互细节上翻车。
