直接对 grid-template-columns 使用 transition 会失效，因 fr、auto 等单位不可插值；推荐用 css 自定义变量过渡（--sidebar-width）实现平滑动画，或降级为 width + min-width: 0 方案。
grid-template-columns 直接加 transition 会静默失效
你写 transition: grid-template-columns 0.3s，Chrome 和 Firefox 都不会报错，但动画根本不动——这不是 bug，是 CSS 规范明确禁止对 fr、auto、minmax() 这类非可插值单位做过渡。哪怕从 0fr → 1fr 或 0px → 240px，浏览器也无法计算中间帧，结果就是跳变或完全无反应。
用 CSS 自定义变量 + transition 实现真正平滑列宽动画
现代浏览器（Chrome 110+、Firefox 115+）支持对自定义属性做过渡，这是目前最干净的纯 CSS 解法：
- 在 Grid 容器上定义变量：
--sidebar-width: 240px，并用它声明列：grid-template-columns: var(--sidebar-width) 1fr - 折叠时把变量设为
0px（注意单位统一，不能混用px和fr） - 显式声明过渡：
transition: --sidebar-width 0.3s ease-in-out - 降级必须加：
@supports not (transition: --sidebar-width 0.1s)包裹 fallback，比如用transform: scaleX(0)或 class 切换
侧边栏折叠别动 grid-template-columns，改用 width + min-width: 0
如果目标浏览器不支持变量过渡，或者列内有复杂子元素（如 flex 容器、长单词、表单控件），直接操作 grid-template-columns 极易导致子项错位、动画中断。更稳定的做法是让侧边栏自己收缩：
- 给侧边栏容器设
width: 240px（展开）→width: 0（折叠） - 必须加
min-width: 0，否则内部内容会撑开它，width: 0失效 - 必须加
overflow: hidden，否则滚动条残留、点击穿透仍存在 - 主内容区保持
grid-column: 2不变，避免因列结构变化导致重排
主内容区没自动占满？检查 grid-column 是否写死
折叠后右侧留白、主内容区卡在原位置，大概率不是列宽问题，而是子元素定位太僵硬：
- 确认主内容区是否写了
grid-column: 2这类固定定位——它会强制占第二列，即使第一列宽度为 0 - 改用
grid-column: 1 / -1或grid-column: 1 / 3（取决于总列数），让它跨列铺满可用空间 - 若用
grid-template-columns: 0px 1fr，确保父容器高度上下文稳定（比如设了height: 100vh或被 flex 父级约束），否则1fr可能塌陷
width 方案稳定，但缩放过程略显生硬。选哪个，取决于你的用户浏览器分布和动画容忍度。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
