grid-template-columns 不支持 transition，因其为声明式轨道定义而非数值属性；可用 transform 缩放容器或改用 grid-template-rows 的 0fr↔1fr 实现原生动画，复杂场景推荐 animate-css-grid 库。
grid-template-columns 不能直接加 transition，浏览器会静默忽略——这不是你写错了，是规范本身不支持。
为什么 grid-template-columns 加了 transition 也没动画？
它不是数值型属性，而是声明式轨道定义（比如 "1fr 2fr auto"）。浏览器无法在两组不同结构间插值：从 "200px 300px" 到 "250px 250px" 看似都是像素，但规范明确排除 grid-template-columns 的过渡能力。Chrome、Safari、Firefox 全部一致行为——无报错、无动画、无中间帧。
真正能用的列宽“模拟动画”方案
放弃对轨道本身的控制，改操作视觉层：
- 给侧边栏容器加
position: relative - 内部内容用
transform: scaleX(1)→scaleX(0.2)模拟收缩 - 主内容区保持
grid-column: 2 / -1不变，不受影响 -
scaleX(0)会让子元素不可点击，必须同步切换pointer-events: none
这种做法不触发重排，GPU 加速，兼容性好，且能匹配 Grid 布局语义（比如侧边栏缩放时主区域自动伸展）。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
替代路径：用 grid-template-rows 做高度收放（唯一原生支持的 Grid 过渡）
如果你的“列宽变化”本质是折叠/展开一个垂直区域（如响应式侧边栏），可以把它转为行方向处理：
- 设父容器
display: grid+grid-template-rows: 0fr - 目标区域作为直接子项，用
grid-row: 1 / 2 - 切换类时改为
grid-template-rows: 1fr或max-content - 必须配
overflow: hidden，否则内容溢出会破坏动画连贯性
这是目前唯一被所有现代浏览器原生支持的 Grid 结构过渡方式，0fr ↔ 1fr 语义清晰，动画自然。
复杂布局别硬扛，用 animate-css-grid 库兜底
当你要同时动 grid-template-columns、grid-gap、项目位置（grid-column）时，手动模拟成本高、易出错：
- 只需包裹容器：
wrapGrid(document.querySelector('.grid')) - 它自动监听 DOM 变化，用
transform计算并驱动每个项目的位移动画 - 支持自定义
duration、easing、stagger，且不影响原有 HTML 结构 - 注意：它不改变实际 Grid 定位，只是视觉补帧——可访问性和 DOM 顺序仍按原始布局
真正麻烦的从来不是“怎么让列看起来在变”，而是“怎么让多个项目在列数变化时协调移动、不跳、不错位”。这类问题，手写 CSS 很快会失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
