grid-template-columns 不支持 transition 动画，因其值为结构化轨道定义，无法线性插值；浏览器静默忽略，直接重排。替代方案包括：CSS 自定义变量+@property、transform 位移、width/opacity 组合、auto-fit 响应式布局。
为什么 grid-template-columns 加了 transition 也没动画
不是写法错了，也不是漏了前缀或顺序问题——浏览器压根不支持对 grid-template-columns 做插值计算。它的值是结构化轨道定义（比如 "240px 1fr auto"），不是单一数值，中间没有可线性过渡的“中间状态”。Chrome、Safari、Firefox 全部静默忽略，既不报错，也不触发动画，只在计算完新布局后直接重排。
grid-template-columns 动画失效的典型场景
常见于这些操作中：
- 响应式切换列数时，JS 直接改
element.style.gridTemplateColumns = '1fr 1fr'并期望有过渡 - CSS 中写了
transition: grid-template-columns 0.3s，但 hover 或 class 切换后只有突变 - 用
@keyframes尝试动画化grid-template-columns，结果全程无变化 - 误以为
grid-template-width是合法属性，实际该声明被浏览器完全忽略
真正能动画的替代方案有哪些
绕过布局属性本身，把动画压力转移到可插值、不触发重排的属性上：
- 用 CSS 自定义变量控制列宽：
grid-template-columns: var(--sidebar-width) 1fr，再配合transition: --sidebar-width 0.3s（需搭配@property声明类型，仅 Chrome 115+ 支持） - 改用
transform: translateX()移动子项，视觉上模拟列位置变化，不触发布局重算 - 侧边栏推拉等固定结构场景，优先用
width+overflow+opacity组合，比硬改网格更稳定 - 大量动态列需求，直接用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)))，由 CSS 引擎原生响应，无需 JS 干预
容易被忽略的性能陷阱
即使你让 grid-template-columns 看似“动起来了”，背后代价可能很高：
- 每次变更都会触发整容器重排（Layout），子项含图片或字体时还会叠加回流（Reflow）
- 在
scroll或resize中高频设置，极易造成 layout thrashing，移动端单次耗时可能超 16ms，直接掉帧 - 用
all 0.3s过渡会把grid-template-columns卷进去，反而拖慢其他本可动画的属性 - animate-css-grid 这类库虽能模拟效果，但它本质是用
transform批量修正位置，仍依赖你避免在动画中同时修改轨道定义
真正卡住的从来不是 Grid，而是你让它反复重新理解整个布局结构。只要还在动 grid-template-columns、grid-column 或 grid-row，就等于在要求浏览器每帧都重跑一遍网格算法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
