grid-template-columns等属性无法transition动画，因其非数值型且浏览器不支持结构插值；仅grid-template-rows的0fr↔1fr可原生过渡；推荐用transform模拟或animate-css-grid库实现稳定网格动画。
因为 grid-template-columns、grid-template-rows、grid-template-areas 这些属性根本不能被 transition 插值，浏览器静默忽略，布局只会瞬间跳变。
grid-template-columns 加了 transition 为什么没反应
它不是数值型属性，而是轨道描述语法（比如 "1fr 2fr auto" 或 "200px 1fr"）。浏览器无法在线性帧之间插值两个结构不同的定义——从两列变三列、auto 切到 1fr、甚至只是 "200px 300px" → "250px 250px"，所有主流引擎都拒绝计算中间状态。
- 常见现象：布局突兀跳变，控制台无报错，开发者工具里看到
transition声明生效但动画时长为0ms - 别试
@property注册 CSS 变量去“绕过”——Chrome 120+ 才初步支持，Firefox/Safari 兼容性差，且仅对单个fr值替换有微弱效果 - 真正能原生过渡的只有
grid-template-rows的0fr ↔ 1fr（需配合单网格项 +overflow: hidden）
grid-column / grid-row 动画断掉的典型原因
这两个属性理论上可动画，但非常脆弱：起止值必须是可插值的整数，任何非数值表达式都会让动画 fallback 到瞬时切换。
- ✅ 可行：
grid-column: 1 / 3→grid-column: 2 / 4 - ❌ 中断：
grid-column: 1 / span 2→grid-column: auto / span 3（含auto或span非数字） - ⚠️ Firefox 直到 v115 才稳定支持
grid-row动画，旧版本直接跳变 - 如果用了
grid-area: sidebar，得先拆成grid-row+grid-column才能动
为什么 transform 模拟才是最稳的方案
它不依赖 Grid 定位逻辑，只改渲染层位置，GPU 加速、兼容性好、不会错位。手写或用库，本质都是走这条路。
立即学习“前端免费学习笔记（深入）”；
- 给网格项设
position: relative，再用transform: translate()控制位移 - 加
will-change: transform提前提示浏览器优化 - 用 CSS 变量定义偏移（如
--dx、--dy），再通过calc(var(--dx) * 110px)计算translate值，便于响应 JS 排序 - 复杂重排别硬写 CSS：用
animate-css-grid库，两行代码wrapGrid(document.querySelector('.grid'))即可自动监听 DOM 变化、协调所有项目位移
真正麻烦的从来不是“怎么让元素看起来在动”，而是“怎么让多个项目在列数变化时保持相对关系、不撕裂、不重叠”。这类问题，CSS 变量或手动 transform 很快就难维护了——该上库的时候就得上。
