如何通过CSS Grid和Transform实现响应式侧边栏抽屉的Grid切换效果？

本文共计1049个文字，预计阅读时间需要5分钟。

纯Grid布局无法实现抽屉滑动进出动画，必须配合transform类控制。Grid只管理布局结构，transform才负责位移和过渡。

为什么不能只靠 grid-template-columns 切换显隐

常见错误是想用媒体查询直接把 grid-template-columns: 280px 1fr 改成 1fr 来“隐藏”侧边栏——这只会让侧边栏列坍缩为 0 宽，内容被裁剪或挤变形，且无动画、无遮罩、无法锁 body 滚动。

• display: none 或 visibility: hidden 会让 Grid 跳过该区域计算，主内容不会自动拉宽，常留白边
• opacity: 0 不改变占位，侧边栏仍可点击、仍触发焦点，交互逻辑混乱
• Grid 本身不提供“滑出视口”的位移能力，translateX() 是唯一可靠路径

Grid 布局怎么和 transform 抽屉共存不打架

关键在于：Grid 控制“默认结构”，transform 控制“临时状态”。两者作用域分离，但需注意 DOM 层级与定位上下文。