本文详解如何通过合理设置 grid-template-rows 过渡、统一网格容器声明及动态控制子元素渲染，解决 Grid 布局中隐藏区块展开不流畅、row-gap 为不可见元素预留空白两大核心问题。
本文详解如何通过合理设置 `grid-template-rows` 过渡、统一网格容器声明及动态控制子元素渲染，解决 grid 布局中隐藏区块展开不流畅、`row-gap` 为不可见元素预留空白两大核心问题。
在使用 CSS Grid 构建可展开内容区域时，开发者常误将 display: grid 和过渡属性仅绑定在 .cards--hidden 类上，导致切换至 .cards--active 后容器退化为普通块级元素（display: block），使 grid-template-rows 失效，过渡中断。根本解法是将网格布局和过渡声明提升至通用类 .cards，确保无论状态如何变化，容器始终维持 Grid 上下文，从而让 0fr → 1fr 的行高过渡真正生效。
.cards {
display: grid;
transition: grid-template-rows 300ms ease-in-out;
/* 关键：统一声明，避免 display 切换破坏 Grid */
}
.cards--hidden {
grid-template-rows: 0fr;
overflow: hidden;
}
.cards--active {
grid-template-rows: 1fr;
}同时，row-gap 的“伪留白”问题源于 Grid 规范：即使某行内所有子项被 display: none 或内容为空，只要该行存在（即 grid-template-rows 定义了对应轨道），row-gap 仍会在轨道间生效。因此，不能依赖隐藏子元素来消除间隙，而应从轨道定义层面控制——通过 grid-template-rows: 0fr 将整行高度坍缩为零，并配合 overflow: hidden 截断溢出，彻底规避间隙。
此外，为防止 .wrapper 内边距与边框在折叠态干扰布局，建议对隐藏状态单独重置：
.cards--hidden .wrapper {
padding: 0;
border: none;
}最后，注意 JavaScript 中的状态切换逻辑需保持一致性：移除 .cards--hidden 同时添加 .cards--active，并确保 .cards 基础类始终存在（HTML 中已正确声明 <div class="cards cards--hidden">）。按钮隐藏逻辑无需修改，但建议为 .btn__expand 添加 margin-top 提升可读性。
立即学习“前端免费学习笔记（深入）”；
✅ 最佳实践总结：
- ✅ 将 display: grid 和 transition 置于基础类（如 .cards），而非状态类；
- ✅ 使用 0fr / 1fr 配合 overflow: hidden 实现无闪烁高度过渡；
- ❌ 避免用 visibility: hidden 或 opacity: 0 替代 grid-template-rows: 0fr——它们不改变布局空间；
- ⚠️ 若需支持多行动态展开（非全量展开），可结合 grid-template-rows: repeat(auto-fit, minmax(...))) 与 max-height 备用方案增强兼容性。
这套方案兼顾性能（纯 CSS 过渡）、语义清晰性与跨浏览器稳定性，适用于仪表盘、FAQ 折叠面板、渐进式内容加载等典型场景。
