折叠面板展开时Grid行高不撑开，是因为1fr需明确高度上下文才能计算剩余空间；应避免height: 100%，改用min-height: min-content、grid-row: span 2、禁用grid-auto-flow: dense，并设min-height: 0和grid-template-rows: auto max-content。
折叠面板展开时 Grid 行高不自动撑开？
常见现象是：点击展开后，grid-template-rows: auto 1fr 中的 1fr 行没反应，内容被截断或溢出。这不是 Grid 失效，而是 1fr 只分配“剩余空间”，而折叠前容器高度为 auto，没有“剩余”可言——它需要一个明确的高度上下文才能计算。
解决思路不是给 Grid 容器加 height: 100%（容易连锁破坏），而是让展开后的行主动“参与高度推导”：
- 确保父容器有
min-height: min-content或至少不设height: 0/overflow: hidden - 折叠项本身用
grid-row: span 2或显式grid-row-start/grid-row-end覆盖多行，避免被grid-auto-rows的隐式行吞掉 - 禁用
grid-auto-flow: dense，否则展开后项可能被重排进已有行，导致高度塌陷
Accordion 内容高度突变导致 Grid 布局抖动？
展开/收起瞬间，Grid 容器高度重排，视觉上“跳一下”。这不是动画问题，而是浏览器在重绘前先按旧尺寸布局，再按新尺寸回流——尤其当内部有图片、字体加载未完成时更明显。
稳定高度链的关键动作：
- 给 Accordion 面板（即展开区域）设
min-height: 0（防止 Flex/Grid 子项默认最小高度干扰） - 用
grid-template-rows: [header] auto [panel] max-content替代auto 1fr，让面板行由内容决定，而非依赖剩余空间 - 若需平滑过渡，配合
max-height+overflow: hidden动画，但必须提前知道最大可能高度（如max-height: 500px），否则max-height: none不触发过渡
响应式下 Grid 列数变化时 Accordion 高度错乱？
比如桌面端两列 Grid（grid-template-columns: 1fr 1fr），小屏变单列后，原本并排的两个 Accordion 项堆叠，但它们的 grid-row 位置没重算，导致高度分配错位、空白或重叠。
根本原因是：Grid 的行轨道（grid-template-rows）是静态定义的，不会随列数自动调整行结构。解决方案分两层：
- 放弃固定
grid-template-rows，改用grid-auto-rows: minmax(60px, max-content)，让每项自占一行且保底高度 - 用
grid-column: 1 / -1让 Accordion 标题和面板都横跨所有列，避免因列数变化导致行内错位 - 若需标题固定、面板滚动，不要给 Grid 容器设
overflow，而是给面板内部容器加overflow-y: auto并配max-height: calc(100vh - 200px)
为什么 align-self: stretch 在 Accordion 里失效？
你写了 grid-template-columns: 1fr，期望 Accordion 项拉满高度，但实际只撑到内容高。这是因为 align-self: stretch 仅在 Grid 容器有**明确高度约束**时生效；而 Accordion 展开前容器高度为 auto，stretch 找不到“可拉伸的目标”。
真正起作用的是容器高度链是否闭合：
- 外层容器（如
body）需有min-height: 100vh - Grid 容器自身不能是
height: auto，建议用min-height: 100%或height: fit-content - Accordion 项别写
align-self: start，也别在外层设align-items: start - 如果项内用了
position: absolute，记得加min-height: 1px触发 BFC，否则 stretch 被中断
关键点不在 Grid 语法多复杂，而在高度是否从根节点一路透传下来——漏掉 min-height、多写一个 align-self、或者图片还没加载完，都会让 Accordion 看起来“不听话”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
