grid-template-rows 不支持 transition，因其值为不可插值的结构化轨道定义（如 100px 1fr），浏览器无法计算中间帧；仅 grid-row-start 等整数定位属性可动画，内容展开推荐 max-height + overflow: hidden。
因为 grid-template-rows 的值不是可插值的数值类型，浏览器根本无法计算中间状态，transition 会被静默忽略——这不是 bug，是 CSS 规范明确禁止的行为。
为什么浏览器直接跳过动画
你写 transition: grid-template-rows 0.3s，Chrome、Firefox、Safari 都不会报错，也不会警告，只是完全不执行动画。原因很实在：
-
grid-template-rows: 100px 1fr和grid-template-rows: 100px 2fr是两组结构化描述，不是两个数字；浏览器没法在“100px+1fr”和“100px+2fr”之间线性插值 -
fr、minmax()、auto、fit-content()全都不是长度单位，它们是布局函数或弹性占位符，没有像素意义 - 即使你写成
0fr → 1fr或0px → auto，结果也一样：要么跳变，要么无反应
哪些 Grid 属性其实支持 transition
真正能被平滑过渡的 Grid 相关属性极少，且限制严格：
-
grid-row-start、grid-row-end、grid-column-start、grid-column-end—— 仅当值为纯整数时（如2→4），不能含auto或span -
grid-row/grid-column简写也支持，但必须是整数范围形式，例如1 / 3→2 / 4 -
grid-area不行，它是四个定位属性的简写，一旦含字符串（如"header"）就彻底不可插值
替代方案怎么选才不踩坑
别硬刚 grid-template-rows，根据场景选更稳的路径：
- 内容展开/收起 → 用
max-height+overflow: hidden：
必须设固定上限值（如500px），不能用none或auto；搭配opacity可防文字上挤抖动 - 单行/定高内容（如菜单项、标签栏）→ 用
grid-template-rows: 1.4em 0px→1.4em 5.6em：
前提是高度可预估（比如最多 4 行 × 1.4em = 5.6em）；必须加overflow: hidden，否则0px行仍可能漏出内容 - 侧边栏折叠 → 别动
grid-template-columns，改用width+min-width: 0：width: 240px→width: 0，配合overflow: hidden和pointer-events: none；min-width: 0是关键，否则内部长文本会撑开容器
真正容易被忽略的是：就算你把样式写对了，如果父容器本身 display 不是 grid，或者它处于 Flex 子项中且没设 min-width: 0，grid-template-rows 连渲染都可能异常——动画失效往往只是表象，底层是布局上下文已经崩了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
