grid-template-columns 不能直接 transition，因其属离散布局属性，非可插值类型；CSS 变量亦无法动画，仅当用于 transform 等可过渡属性时才生效；可行方案是用 transform 或 ResizeObserver 配合 CSS 变量间接模拟。
grid-template-columns 能不能直接 transition
不能。浏览器规范层面不支持对 grid-template-columns、grid-template-rows 或 grid-template-areas 做 CSS transition——它们属于“离散布局结构变更”，不是可插值的数值型属性。你写了 transition: grid-template-columns 0.3s，结果仍是瞬时跳变，控制台也不会报错，只是被静默忽略。
用 CSS 变量 + transition 为什么也不行
CSS 变量本身不可动画，transition 对变量名（如 --cols）无效。只有变量被用于**可动画属性**（如 width、transform、opacity）时，才可能间接触发过渡；而 grid-template-columns: var(--cols) 中的 var(--cols) 是布局计算阶段介入的，不参与插值流程。
- 写
:root { --cols: "1fr 2fr"; }再改它，grid-template-columns不会缓动 - 想靠 JS 改
style.setProperty('--cols', '2fr 1fr')+ transition，同样无效 - 真正能过渡的，只有
transform、opacity、width等浏览器原生支持插值的属性
真正可行的动画替代方案
要让 Grid 列宽“看起来”在平滑变化，得绕开布局层，操作视觉层或容器内部元素：
- 给侧边栏外层加
position: relative，内部内容用transform: scaleX(1) → scaleX(0.2)模拟收缩；主内容区保持grid-column: 2 / -1不变 -
scaleX(0)会让子元素不可点击，需同步切换pointer-events: none - 若需拖拽调整列宽，把目标列内子元素设为
overflow: auto; resize: horizontal，再用ResizeObserver监听其clientWidth，写入 CSS 变量（如--resized-col-width: 240px），Grid 容器用grid-template-columns: var(--resized-col-width) 1fr - 避免直接拼字符串改
style.gridTemplateColumns，容易破坏fr计算逻辑
响应式列数自动增减要不要动画
像 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr))) 这种列数随容器宽度动态变化的写法，本身没有动画能力——浏览器是重排后立即渲染新轨道，不会过渡。如果真需要视觉缓冲，只能靠 JS 配合 requestAnimationFrame 手动模拟：先冻结布局、渐变缩放子项、再触发重排。但绝大多数场景下，这种“伪动画”反而干扰用户感知，不如接受原生的即时切换。
真正容易被忽略的是：auto-fit 的行为依赖于内容尺寸与容器宽度的实时比对，一旦子项有固定宽高或 min-width 干扰，就可能卡在错误列数上——这不是动画问题，而是布局逻辑没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
