直接用 grid-template-rows: auto max-content 替代 auto 1fr，再配合 grid-row: span 2 和 min-height: 0，就能让折叠面板展开时自动撑开 Grid 行高；因为 1fr 需明确高度上下文才能分配剩余空间，而折叠前容器高度为 auto，无“剩余”可算，导致内容截断或溢出。
直接用 grid-template-rows: auto max-content 替代 auto 1fr，再配合 grid-row: span 2 和 min-height: 0，就能让折叠面板展开时自动撑开 Grid 行高，不截断、不抖动、不依赖 JavaScript。
为什么 1fr 在折叠面板里不生效？
因为 1fr 只分配“剩余空间”，而折叠前整个容器高度是 auto，没有明确上下文可算“剩余”。浏览器不会等面板展开后再重算轨道——它按初始状态布局，结果就是内容溢出或被裁切。
-
height: 100%或min-height: 100vh是常见误解：强行加高度会破坏流式行为，尤其在嵌套或响应式场景下连锁错位 - 用
grid-auto-flow: dense更危险：展开后项可能被塞进已有行，导致视觉重叠或空白 - 真正需要的不是“填满剩余”，而是“由内容决定这一行该多高”——
max-content就是为此设计的
怎么让每个 FAQ 项正确跨行并撑开？
Accordion 标题和面板必须作为同一网格容器的**直接子元素**，且标题占一行、面板占下一行（或更多），不能靠隐式行自动分配。
- 给标题元素设
grid-row: 1，面板容器设grid-row: 2，或统一用grid-row: span 2 - 确保父网格容器没设
grid-template-rows固定值（如100px 200px），否则会锁死高度 - 面板内部容器必须加
min-height: 0：防止 Flex/Grid 子项默认最小高度干扰内容真实高度计算 - 如果面板含图片或异步加载内容，首次展开可能仍抖动——这是正常回流，可在展开后触发一次
getComputedStyle(panel).height强制同步
如何避免展开/收起时布局跳动？
跳动本质是高度突变引发的重排，不是动画问题。CSS 过渡对 grid-template-rows 无效，别试；真正可控的是内容容器自身的 max-height。
- 给面板外层 wrapper 设
max-height: 0+overflow: hidden+transition: max-height 0.3s ease - 展开时 JS 读取
panel.scrollHeight并赋给max-height；收起时设回0 - 别用
height: auto：它不可动画，且会强制 Grid 重算所有轨道，加剧跳动 - 若需纯 CSS（无 JS），可用
:checked+max-height配合足够大的固定值（如max-height: 500px），但得预估最大内容高度
响应式列数变化时面板高度错乱怎么办？
Grid 的 grid-template-rows 是静态定义的，不会随 grid-template-columns 改变而重算行结构。小屏单列、大屏双列时，原来并排的两个 FAQ 项堆叠，但它们的 grid-row 还在争抢同一行轨道。
- 放弃固定
grid-template-rows，改用grid-auto-rows: minmax(60px, max-content)，让每项自占一行且保底高度 - 用
grid-column: 1 / -1让标题和面板都横跨所有列，避免因列数变化导致行内错位 - 如果用了
grid-template-areas，确保每个 FAQ 块的grid-area名称唯一，且不复用（比如不能两个.faq-item都叫"header"）
最易忽略的点：所有参与 Grid 布局的元素必须是网格容器的**直接子元素**。一旦套了多余 wrapper（比如 grid-row 就失效，高度推导链立刻断裂——这时候查 DOM 结构比调样式更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
