如何实现 CSS Grid 中隐藏元素的平滑展开动画并消除行间隙

作者：袖梨 2026-08-07

本文详解如何通过合理设置 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 的副作用。