本文详解如何通过合理设置 grid-template-rows 过渡、统一网格容器样式及动态控制子元素渲染，实现隐藏内容的流畅展开动画，并彻底避免 row-gap 对不可见元素产生的无效占位问题。
本文详解如何通过合理设置 `grid-template-rows` 过渡、统一网格容器样式及动态控制子元素渲染，实现隐藏内容的流畅展开动画，并彻底避免 `row-gap` 对不可见元素产生的无效占位问题。
在基于 CSS Grid 的渐进式内容展开场景中，直接对 display: grid 容器使用 grid-template-rows: 0fr → 1fr 实现高度过渡是一种常见思路，但实践中常因样式作用域错位导致动画失效或布局异常。核心问题在于：过渡属性必须定义在始终生效的基类上，而非仅作用于临时状态类。
✅ 正确做法：将 display: grid 和 transition 提升至通用类
原代码中，.cards--hidden 定义了 display: grid 和 grid-template-rows: 0fr，而 .cards--active 未声明 display: grid，导致切换时容器回退为默认 display: block，grid-template-rows 失效，过渡自然中断。解决方案是将网格布局与过渡声明统一绑定到基础类 .cards：
.cards {
display: grid;
transition: grid-template-rows 300ms ease-in-out;
/* 避免 row-gap 影响隐藏项：不在此处设 gap，改用 margin 控制可见项间距 */
}随后，仅通过 grid-template-rows 控制显隐状态：
.cards--hidden {
grid-template-rows: 0fr;
overflow: hidden;
}
.cards--active {
grid-template-rows: 1fr;
}? 关键原理：0fr 表示该行轨道高度为 0（非 none），配合 overflow: hidden 可安全隐藏内容；1fr 则按剩余空间等比分配——二者均为可过渡的 <track-size> 值，确保 CSS 引擎能插值计算中间状态。
立即学习“前端免费学习笔记（深入）”；
? 消除 row-gap 对隐藏元素的占位干扰
Grid 的 row-gap 会在所有行轨道间插入固定间距，即使某行内容被 grid-template-rows: 0fr 压缩为 0 高度，间隙仍会保留，造成视觉“空隙”。根本解法是：放弃全局 row-gap，改用 margin-bottom 精确控制可见子项间距。
例如，为 .items 元素添加底部外边距，同时在隐藏状态下重置其父容器 .wrapper 的内边距与边框，从源头移除冗余空间：
/* 仅对可见项应用间距 */
.visible .items,
.cards--active .items {
margin-bottom: 10px; /* 替代 row-gap */
}
/* 隐藏状态下彻底清空 wrapper 内容区域 */
.cards--hidden .wrapper {
padding: 0;
border: none;
height: 0;
}这样，当 .cards--hidden 激活时，.wrapper 高度归零且无内边距，其内部 .items 的 margin-bottom 不再产生实际间距，完美规避 row-gap 的副作用。
? 完整优化建议清单
- JavaScript 层保持简洁：无需修改 DOM 结构，仅操作 class 切换即可驱动动画；
- 避免 visibility: hidden 或 opacity: 0：它们不改变文档流，无法解决 row-gap 占位问题；
- 慎用 height 过渡：Grid 布局中 height 与 grid-template-rows 混用易引发冲突，应专注轨道尺寸控制；
- 增强可访问性：为 .cards--hidden 添加 aria-hidden="true"，展开后同步更新为 aria-hidden="false"；
- 响应式适配：若需多列布局，可结合 grid-template-columns 与 minmax() 动态调整，不影响展开逻辑。
通过以上重构，不仅实现了真正平滑的展开动画（CSS 引擎全程插值 0fr → 1fr），更从根本上消除了隐藏元素引发的布局塌陷与间隙残留问题，兼顾性能、语义与用户体验。
