grid-template-rows/columns 不支持 transition，因 fr、minmax()、auto 非可插值单位；推荐用 max-height+overflow:hidden 或预估高度的 grid-template-rows 像素值实现平滑动画。
为什么 grid-template-rows / grid-template-columns 不能加 transition
因为 fr、minmax()、auto 都不是可插值的长度单位，浏览器无法计算中间帧。你写 transition: grid-template-rows 0.3s，Chrome 和 Firefox 都会静默忽略——这不是 bug，是 CSS 规范明确限制的行为。哪怕写成 0fr → 1fr 或 0px → auto，动画也只会跳变或完全不触发。
用 max-height 替代 height 实现内容区平滑展开
这是最通用、兼容性最好、且无需 JS 的方案，适用于面板、卡片、多行文本等大多数折叠场景：
-
max-height必须设为一个**固定且足够大**的值（如500px或30em），不能用auto；过小会截断内容，过大则收起后留白 - 必须始终搭配
overflow: hidden，否则内容会溢出、遮挡其他元素、破坏布局流 - 初始状态建议同时设
opacity: 0，避免文字在高度过渡中“向上挤出”造成抖动 - transition 要显式声明属性，避免用
all：例如transition: max-height 0.25s ease, opacity 0.25s ease
示例：
.panel {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.25s ease, opacity 0.25s ease;
}
.panel.is-open {
max-height: 500px;
opacity: 1;
}
用 grid-template-rows: 0px → [具体像素] 控制单行/定高内容
如果你能预估最大高度（比如每行 1.4em，最多显示 4 行 → 5.6em），这个方案比 max-height 更精准，且不依赖“保险值”：
- 收起态用
grid-template-rows: 1.4em 0px，展开态改为grid-template-rows: 1.4em 5.6em - 必须给内容区域加
overflow: hidden，否则 0px 行仍可能漏出内容 - 不能混用
align-content: start等属性，否则轨道高度计算会被干扰 - IE 完全不支持，仅推荐用于现代浏览器主导的项目
侧边栏折叠别动 grid-template-columns，改用 width + min-width: 0
Grid 容器结构一旦变化（比如从 240px 1fr 切到 1fr），子元素的 grid-column 可能错位，动画也会中断。真正稳定的做法是让侧边栏自己收缩：
- 侧边栏容器设
width: 240px（展开）或width: 0（折叠） - 必须加
min-width: 0，否则内部 flex 子项或长单词会撑开它，width: 0失效 - 必须加
overflow: hidden，否则滚动条残留、点击穿透仍存在 - 媒体查询里只切类名（如
.mobile-collapsed .nav-sidebar），不要重写grid-template-columns
Grid 容器保持稳定两列：grid-template-columns: minmax(0, 1fr) minmax(0, 3fr)，动画才不会跳。
所有这些方案都绕不开一个事实：CSS 动画只认确定数值。所谓“自适应”，要么靠预设安全上限（max-height），要么靠 JS 测高后注入（height 内联），要么靠 Grid 的 minmax(0, max-content) 这种有限语义——但后者对父容器高度有强依赖，稍不注意就塌陷。选哪条路，取决于你愿不愿意为“精确”多写几行 JS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
