grid-template-columns/rows无法transition，因其属离散布局结构、不可插值；仅grid-column/row-start/end等定位属性支持过渡，且须用整数或span语法；视觉动画应通过transform、子项过渡或@media切换实现。
不能直接用 transition 动画 grid-template-columns 或 grid-template-rows，写了也白写——浏览器静默忽略，不报错也不动。
为什么 grid-template-* 无法 transition
这些属性属于“离散布局结构”，规范明确标记为 not animatable。比如把 grid-template-columns 从 "1fr 1fr" 改成 "1fr 2fr"，浏览器不会插值，只会瞬时重排。
- 常见错误现象：
transition: grid-template-columns 0.3s完全没动画，控制台零提示 - 即使搭配
will-change: grid-template-columns也无效——will-change不改变可动画性 -
fr、auto、minmax()这类值本身不可插值，连起点终点都算不出中间态
真正能 transition 的 Grid 属性有哪些
只有定位类属性支持过渡：它们描述的是“某个元素落在哪条线之间”，数值明确、可插值。
-
grid-column-start/grid-column-end -
grid-row-start/grid-row-end -
grid-column（等价于start / end） grid-row
关键限制：必须用 / 分隔的整数或 span n 形式，例如 grid-column: 2 / 4 或 grid-column: span 2；写成 grid-column: 2 会被解析为 2 / auto，而 auto 不可插值，动画立刻失效。
立即学习“前端免费学习笔记（深入）”；
想让网格“看起来”在变化，得绕开 template 属性
目标是视觉上平滑缩放/位移/展开？靠子元素或容器变形来模拟，别硬刚 grid-template-*。
- 改轨道尺寸？给子项加
transition: height或transition: flex-basis（若子项是display: flex），再靠fr自适应撑开 - 想让整个网格容器“弹入”？用
transform: scale()+opacity配合transition，比改grid-template可靠十倍 - 响应式列数切换（如从 3 列变 1 列）？用
@media切换grid-template-columns值，再给容器加transition: transform 0.3s实现入场偏移，而非试图过渡列定义本身
Grid + Transition 实战中容易被忽略的细节
动画卡顿、跳变、或根本不动，往往不是代码写错，而是这几个点没对齐：
-
transform和grid混用时，确保父容器没设overflow: hidden且没触发层叠上下文干扰渲染 - 用
getBoundingClientRect()计算目标位置做transform: translate()补间时，注意滚动容器内坐标需减去scrollTop - 移动端 Safari 对
grid-column过渡支持较晚（iOS 16.4+ 才稳定），旧版本建议降级为transform位移 - 如果网格项有
margin或gap，动画过程中 gap 不会插值——它始终是静态计算值，视觉上可能产生“撕裂感”，此时优先用padding替代margin
