grid-template-columns 不支持 transition 动画，因浏览器规范不支持其值插值；可用 grid-template-rows 配 0fr/1fr 实现原生过渡，或用 transform 模拟列宽变化，复杂重排推荐 animate-css-grid 库。
grid-template-columns 加 transition 为什么没动画
直接给 grid-template-columns 写 transition 不会动，这不是你漏写了属性或拼错了值——浏览器规范明确不支持对它做插值。无论你用 1fr 2fr、200px 300px 还是 minmax(200px, 1fr)，只要写在 grid-template-columns 里，加了 transition: grid-template-columns 0.3s 也只会瞬时跳变，控制台静默忽略，连 warning 都没有。
真正能原生过渡的 Grid 动画路径
目前唯一被所有现代浏览器（Chrome/Firefox/Safari）原生支持的结构过渡，是 grid-template-rows 配合 0fr ↔ 1fr 或 max-content：
- 必须让目标区域是网格容器的**直接子元素**，不能嵌套多层
- 父容器设
display: grid+grid-template-rows: 0fr（收起态） - 目标项设
grid-row: 1 / 2，切换类时改为grid-template-rows: 1fr - 务必加
overflow: hidden，否则内容溢出会撕裂动画
这种写法语义清晰：0fr 表示“不占空间但保留布局位置”，1fr 是“按比例分配剩余高度”，中间帧由浏览器自然插值，无需 JS。
列宽变化想“看起来平滑”怎么模拟
如果非要动列宽（比如侧边栏折叠），放弃操作 grid-template-columns，改用视觉层位移：
- 给侧边栏容器加
position: relative - 内部内容用
transform: scaleX(1) → scaleX(0.2)模拟收缩 - 同步切换
pointer-events: none，避免缩到 0 时仍可点击 - 主内容区保持
grid-column: 2 / -1不变，不受影响
这个方案不触发重排，走 GPU 加速，兼容性好，且和 Grid 的语义不冲突——它只是“看起来”在变，底层网格轨道其实没动。
复杂动态重排别硬写，用 animate-css-grid
当你需要同时响应 grid-template-columns 改变、gap 调整、甚至单个子项的 grid-column 移动时，手写 CSS 很快失控。此时推荐 animate-css-grid：
- 安装后只需两行：
import { wrapGrid } from 'animate-css-grid'; wrapGrid(document.querySelector('.grid')); - 它监听 DOM 变化，用
transform逐项计算位移，视觉上协调滑动 - 注意：不要在动画过程中同步修改容器尺寸（如
height: auto），否则快照对比错位，动画撕裂
真正麻烦的不是“让一列变窄”，而是“当列数从 3 变成 4 时，所有卡片怎么平滑滑到新位置、不跳、不错行”。这种协调逻辑，库比手写可靠得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
