grid-template-columns 不支持 transition，因其非数值型属性，浏览器无法插值；应改用 width、transform 等可动画属性实现平滑效果。
grid-template-columns 加 transition 为什么完全没反应
它不是数值型属性，而是轨道描述语法，比如 "240px 1fr" 或 "minmax(280px, 1fr) 1fr"。浏览器无法在线性帧之间插值两个结构不同的定义——没有“50% 状态”可算。你写了 transition: grid-template-columns 0.3s，控制台不报错，DevTools 显示声明生效，但动画时长始终是 0ms，布局瞬间跳变。
真正能平滑过渡的 Grid 相关属性只有这几个
目前被 Chrome、Firefox（v115+）、Safari 原生支持且稳定插值的，仅限以下定位类属性，且必须满足整数起止条件：
-
grid-column和grid-row：必须写成grid-column: 1 / 3这种形式，不能含auto、span或grid-area -
grid-row-start、grid-column-end等单边定位属性，同样只接受整数 -
grid-template-rows在极少数场景下可动：仅当用0fr ↔ 1fr切换单行显隐，并配合overflow: hidden和单一网格项时，Chrome/Safari 支持较稳；Firefox v115 起才补全
注意：grid-area 是简写，只要值里含字符串（如 "header"）就彻底不可插值；gap、grid-auto-rows 等也不在支持列表中。
侧边栏缩放、列数切换这类需求该怎么写才真平滑
别碰 grid-template-columns 动画，转而用数值型属性驱动视觉变化：
- 侧边栏收合：用
width+opacity+pointer-events: none，transition必须声明在基础选择器里（如.sidebar { transition: width 0.3s ease, opacity 0.3s ease; }），不能只塞在@media中 - 主内容区自适应：保持
grid-column: 2 / -1，不受侧边栏width影响 - 列数响应式变化：用
repeat(auto-fit, minmax(280px, 1fr)))，这不是动画，而是重排时自然过渡——但卡顿来自 layout 阶段本身，不是写法问题 - 复杂位移或结构切换：优先用
transform: translate()模拟，配will-change: transform提示合成层（别滥用）
想让整个网格“看起来在动”，绕不开 transform
Grid 轨道本身不能动，但子元素可以。把网格项设为 position: relative，再用 transform: translateX() 或 scaleX() 补位，是最兼容、最顺滑的路径：
-
transform不触发布局重排，GPU 加速，移动端 Safari 也稳 - 若需响应 JS 排序或筛选，可用 CSS 变量传偏移量，例如
--dx: 2，再通过transform: translate(calc(var(--dx) * 110px), 0)计算 - 动画结束后同步更新
grid-column值，保证 DOM 结构与屏幕阅读器一致 - 慎用
display: none切换状态——它会中断渲染流，导致transform过渡直接跳变
真正难的不是“怎么写动画”，而是意识到：Grid 的语义是静态布局结构，动效得交给渲染层负责。强行用 grid-template-columns 做过渡，等于让浏览器做它根本没设计去做的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
