grid-template-columns 不支持 transition 动画，因其为轨道描述语法而非数值型属性，浏览器无法插值；唯一原生支持的 grid 动画是 grid-template-rows（如 0fr ↔ 1fr），需配合 overflow: hidden 和单网格项使用。
grid-template-columns 不能直接加 transition 实现平滑动画——浏览器规范明确不支持，写了也静默失效，不会报错，但不会动。
为什么 grid-template-columns 的 transition 总是没反应
它不是数值型属性，而是“轨道描述语法”，比如 "1fr 2fr auto" 或 "200px 1fr"。浏览器无法在线性帧之间插值两个结构不同的轨道定义：从两列变成三列、从 auto 切到 1fr、甚至只是 "200px 300px" → "250px 250px"，所有主流引擎（Chrome、Firefox、Safari）都拒绝插值。
常见错误现象包括：
- 布局瞬间跳变，无缓动、无中间状态
- 内容重排突兀，用户感知为“闪烁”或“抽搐”
- 开发者工具里看到
transition声明生效，但实际动画时长为 0ms
真正能过渡的 Grid 动画路径：用 grid-template-rows 控制单行高度
这是目前唯一被现代浏览器原生支持的、语义清晰且无需 JS 测量的方案，适用于折叠/展开类交互（如侧边栏收放、FAQ 面板、响应式导航）。
核心是靠 0fr ↔ 1fr（或 max-content）切换，配合强制约束：
- 父容器必须设
display: grid且只有一行显式定义（grid-template-rows: 0fr） - 目标内容作为该容器的**唯一子元素**（即一个网格项），不额外嵌套多层
- 必须加
overflow: hidden，否则内容会撑开容器破坏视觉连贯性 -
transition: grid-template-rows 0.3s ease-in-out推荐时长，太短（如0.1s）在 Safari 下易跳帧
示例：
.panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-in-out;
overflow: hidden;
}
.panel.open {
grid-template-rows: 1fr;
}
想“模拟”列宽变化？绕开 grid-template-columns，用 transform 或库
如果必须保留整体 Grid 布局结构（比如主内容区要随侧边栏缩放自动伸展），又需要视觉上的平滑感，可放弃对列轨道本身的控制，转而操作视觉层：
- 给侧边栏外层加
position: relative，内部内容用transform: scaleX(1)→scaleX(0.2)模拟收缩，主内容区保持grid-column: 2 / -1不变 - 注意
scaleX(0)会让子元素不可点击，需同步加pointer-events: none切换 - 更省心的选择是引入
animate-css-grid库，它用 FLIP 技术劫持 DOM 变化，自动补全位置/尺寸动画，支持grid-template-columns、grid-gap等真实属性的过渡效果
真正难的不是写动画，而是判断该不该让 grid-template-columns 承担动画职责——它天生不是为动态插值设计的。把“结构定义”和“视觉反馈”分离开，反而更容易落地稳定、可维护的效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
