用 grid-template-rows: 0fr → 1fr 可实现平滑高度过渡，因 fr 是可插值弹性单位；需满足三前提：容器有确定高度上下文、显式声明 grid-template-rows、内容区 overflow: hidden。
直接用 height: auto 做过渡动画是不可能的——CSS 不支持从固定值到 auto 的插值计算，浏览器会跳过动画直接渲染。但用 grid-template-rows + fr 单位可以绕过这个限制，实现真正平滑、内容自适应的高度展开/收起。
为什么 grid-template-rows: 0fr → 1fr 能过渡
因为 fr 是一个可计算、可插值的弹性单位，不是“内容高度”，而是“剩余空间分配比例”。0fr 表示该行轨道不参与剩余空间分配（视觉上高度为 0），1fr 表示它拿走所有可用空间。只要容器有明确高度（或被其他行约束），过渡就能生效。
-
0fr不等于height: 0，而是“轨道尺寸为 0”，配合overflow: hidden才隐藏内容 - 必须给父容器设
display: grid和显式grid-template-rows，否则fr无参照空间 - 子元素不能设
height或min-height硬性撑高，否则会干扰轨道收缩 - 过渡触发依赖状态变化（如
:hover、.active类），不能靠 JS 直接改style.gridTemplateRows—— 那会丢失 CSS 动画上下文
grid-template-rows 过渡必须满足的三个前提
缺一不可，否则动画不动或布局错乱：
- 容器必须有**确定的块级高度上下文**：要么自身设
height/max-height，要么被父级约束（如 flex 容器中的flex: 1），或由其他fr/px行固定总高。纯height: auto的容器里，1fr没有“剩余空间”可分 -
grid-template-rows必须是**显式声明**，不能靠grid-auto-rows补充。例如grid-template-rows: 0fr→grid-template-rows: 1fr才有效；而grid-auto-rows: 0fr是无效写法 - 内容区需加
overflow: hidden，且内部元素不要设margin-top/bottom外溢（可用padding替代），否则收起时底部留白或内容露头
实际写法与常见翻车点
典型结构：
.accordion-trigger { cursor: pointer; }
.accordion-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s ease-in-out;
overflow: hidden;
}
.accordion-panel.active {
grid-template-rows: 1fr;
}
.accordion-panel > * {
margin: 0; /* 防止 p/ul 默认外边距撑开 */
padding: 12px 16px;
}
- 别用
all 0.3s过渡——会把grid-template-columns等无关属性也卷进来，拖慢性能 - 移动端点击触发时，确保
.active类能稳定切换；iOS Safari 对:hover支持弱，优先用 JS 切类 - 如果内容高度差异极大（比如一段文字 vs 一张大图），
1fr展开后可能留大片空白。此时改用minmax(0, max-content)更准，但注意 Safari 旧版不支持max-content在minmax()中 - 多个面板同时展开？别共用同一套
grid-template-rows。每个面板得是独立网格容器，否则1fr会均分它们的总高，导致单个内容被压缩
最易被忽略的是：这个技巧本质是“用空间分配替代高度控制”，它不感知内容真实高度，只响应容器可用空间。所以当内容动态加载、图片懒加载完成、或字体加载延迟导致重排时，1fr 分配可能滞后——需要手动触发 grid-template-rows 重置，或在内容就绪后强制 reflow。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
