grid-template-rows/columns 不可动画化，需用 max-height、transform 或子元素尺寸过渡模拟；fr 单位无法直接过渡，应通过控制子项属性间接实现视觉变化。
grid-template-rows/columns 变化本身不会触发 transition
直接改 grid-template-rows 或 grid-template-columns 的值（比如从 "100px 1fr" 改成 "50px 1fr"），浏览器不会做过渡动画——CSS 规范里明确写了，这些属性是「不可动画化」的（not animatable）。
常见错误现象：transition: grid-template-rows 0.3s 写了但完全没反应；用 JavaScript 动态改 style.gridTemplateRows，尺寸跳变，没有缓动。
- 真正能加
transition的是grid-row-start/grid-row-end等轨道定位属性，但它们控制的是**项的位置**，不是轨道尺寸 - 想让轨道“看起来”在缩放，得绕道：用
transform: scaleY()或height+overflow: hidden模拟，或者改子元素尺寸再靠fr自适应 - 如果轨道里只有一两个子项，更简单的方式是给那些子项加
transition: height或transition: flex-basis（配合display: flex容器）
用 max-height 过渡模拟行高收缩/展开
适用于单行轨道内只有一个可伸缩子元素的场景，比如手风琴式面板、折叠菜单栏。原理是把子元素包一层，用 max-height 配合 overflow: hidden 控制显隐，靠它过渡出“轨道变高/变矮”的视觉效果。
使用场景：侧边栏收起、表格行详情展开、响应式导航栏切换。
-
max-height必须设为具体数值（如max-height: 200px），不能用none或fit-content—— 否则过渡失效 - 初始状态建议设
max-height: 0+opacity: 0+overflow: hidden，展开时设为足够大的固定值（比如max-height: 500px），确保有过渡空间 - 注意内容高度动态变化时，硬编码的
max-height值可能不够或过大，导致滚动条闪现或截断；可结合 JS 测量真实高度后写入，但会失去纯 CSS 方案的简洁性
/* 示例：一个网格项内嵌的可展开区域 */
.expander {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s ease, opacity 0.25s ease;
opacity: 0;
}
.expander.active {
max-height: 300px; /* 需覆盖最大可能内容高度 */
opacity: 1;
}
用 transform 缩放整个网格项来“假装”轨道在变
当网格轨道尺寸变化本质是某个 grid-area 内容区域需要缩放时（比如点击后放大预览区），不如放弃动轨道，直接对那个区域的容器做 transform: scale() 或 scaleY()。它性能好、兼容性稳，且天然支持 transition。
性能影响：transform 触发合成层，比改布局属性（如 height）更轻量；但若缩放目标含大量文本或图片，仍需留意重绘开销。
- 别对
grid容器本身做transform，否则整个网格变形，子项位置错乱 - 优先缩放
grid-item内部的 wrapper 元素，保持网格结构稳定 - 配合
transform-origin控制缩放锚点，比如transform-origin: top left让它从左上角展开，更符合“轨道拉伸”直觉
fr 单位无法直接过渡，但可以用间接方式“诱导”渐变
1fr 是计算值，不是长度，所以 grid-template-columns: 200px 1fr → 200px 2fr 这种改法不会过渡。但你可以让 fr 起作用的子项自己动起来，从而“带动”轨道视觉变化。
典型做法：给某列里的子项设 flex: 1 或 width: 100%，再给它加 transition: width 或 transition: flex-basis；或者用 clip-path 配合 transition 做裁剪动画，制造轨道收缩感。
- 如果该列里只有单个子元素，且你控制它的
width或flex-basis，那么网格会根据剩余空间重新分配 fr，视觉上就像轨道在流动 - 注意
flex-basis过渡需配合display: flex，不能直接在 grid item 上生效；得把它变成 flex 容器的子元素 -
clip-path: inset(0)→clip-path: inset(20px)这类过渡，也能模拟轨道“收窄”，适合做遮罩式动效，但语义弱、可访问性差，慎用
实际项目里最稳的路径往往是：别硬刚 grid-template-*，转而控制内容容器的高度、缩放或裁剪。浏览器对这些属性的过渡支持成熟，也更容易预测行为。真正卡住的点，常在于忘了 max-height 必须是固定值，或误以为 fr 本身可被 tween。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
