如何在CSS Grid中实现一个可折叠的响应式侧边菜单？-css教程-PHP中文网

直接对grid-template-columns加transition无效，因fr单位不可插值；应改用width+min-width:0+overflow:hidden实现平滑动画，并通过媒体查询切换width而非轨道定义。

如何在css grid中实现一个可折叠的响应式侧边菜单？

直接用 grid-template-columns: 0fr 1fr 想实现折叠动画是无效的——浏览器根本不会对 0fr 做插值，动画静默失效。

为什么 `grid-template-columns` 不能加 `transition`

因为 fr 是比率单位，不是长度，浏览器无法在 0fr 和 240px（或 1fr）之间计算中间帧。即使写了 transition: grid-template-columns 0.3s，Chrome、Firefox 都会忽略它。这不是 bug，是规范限制。

0fr 表示“不分配剩余空间”，语义上合法，但不可动画
auto、minmax()、grid-template-areas 同样无法被 transition 捕获
真正可动画的只有 width、max-width、transform、opacity 这类 CSS 属性

用 `width` + `min-width: 0` 替代轨道控制

把“折叠”逻辑从 Grid 容器移到侧边栏自身：让它始终占一列，但靠自身宽度变化来收放视觉区域。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

Grid 容器固定两列：grid-template-columns: minmax(0, 1fr) minmax(0, 3fr)
侧边栏容器设 width: 240px（展开）或 width: 0（折叠）
必须同时加 min-width: 0 —— 否则内部 flex 或文本会撑开容器，width: 0 失效
必须加 overflow: hidden —— 否则内容溢出、滚动条残留、点击区域仍存在
加 transition: width 0.25s ease-in-out，动画立刻生效

.nav-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
.nav-sidebar { width: 240px; min-width: 0; overflow: hidden; transition: width 0.25s ease-in-out; }
.nav-sidebar.collapsed { width: 0; }

移动端默认折叠时，媒体查询别覆盖 `grid-template-columns`

在 @media (max-width: 768px) 里重写 grid-template-columns: 1fr，会破坏动画连续性，且右侧主区可能错位——因为 Grid 轨道结构变了，子元素的 grid-column 可能失效。

正确做法：只在断点中切换类名，比如给 body 加 mobile-collapsed，再通过该类控制 .nav-sidebar 的 width
避免同时写 display: none —— 它会让 Grid 轨道塌缩，主内容区自动占满，动画中断
如果需彻底禁用交互，用 pointer-events: none + opacity: 0.01（非 0，防止焦点丢失）
绝对定位子元素（如下拉菜单）要额外处理：.nav-sidebar.collapsed .dropdown { display: none; }

JS 切换类名后没反应？检查这三处

常见问题不是 JS 写错了，而是 DOM 或样式层叠没对齐。

侧边栏元素是否设置了 min-width: 0？没设的话，哪怕 width: 0，内部文字也会强制撑开
是否漏了 overflow: hidden？尤其当侧边栏含图标+文字组合时，文字换行或图标 margin 会导致宽度“假归零”
类名切换后，检查 DevTools 的 “Computed” 面板，确认生效的 width 真的是 0px，而不是被更高优先级选择器（比如内联 style 或更具体的选择器）覆盖

真正麻烦的从来不是怎么写动画，而是让宽度归零这件事，在各种 flex 子项、white-space、inline-block 元素面前保持稳定。