本文详解如何通过合理设置 grid-template-rows 过渡、统一网格容器声明及动态控制子元素渲染，解决 Grid 布局中隐藏内容展开不流畅、row-gap 为不可见元素预留空白等常见问题。
本文详解如何通过合理设置 `grid-template-rows` 过渡、统一网格容器声明及动态控制子元素渲染，解决 grid 布局中隐藏内容展开不流畅、`row-gap` 为不可见元素预留空白等常见问题。
在使用 CSS Grid 实现可展开内容时，直接对 .cards--hidden 单独声明 display: grid 会导致状态切换后网格上下文丢失——当元素移除 cards--hidden 类、添加 cards--active 类时，若 .cards--active 未继承 display: grid，浏览器会回退到默认 display: block，致使 grid-template-rows 失效，过渡动画中断。根本解法是将 display: grid 和 transition 提升至通用选择器 .cards 上，确保无论处于何种状态，容器始终维持 Grid 格式与过渡能力。
.cards {
display: grid;
transition: grid-template-rows 300ms ease-in-out;
/* 其他基础样式（如 padding、border）可在此统一定义 */
}
同时，为避免 row-gap 在隐藏状态下仍占用视觉空间，关键在于：不要依赖 visibility: hidden 或 opacity: 0，而应彻底移除 DOM 渲染或通过 height: 0 + overflow: hidden 配合 grid-template-rows: 0fr 控制布局流。原方案中 .cards--hidden .wrapper 的 padding: 0; border: none 是有效策略——它压缩了内部容器的占位，使 0fr 行高真正“坍缩”为零高度，从而让 row-gap 不再作用于空行。
更进一步，推荐采用以下增强写法，兼顾语义性与兼容性：
/* 确保所有 cards 始终为 grid 容器 */
.cards {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 300ms cubic-bezier(0.34, 1.17, 0.66, 1.01); /* 使用更自然的缓动曲线 */
overflow: hidden;
}
/* 展开时激活整行 */
.cards--active {
grid-template-rows: 1fr;
}
/* 隐藏状态下，内部 wrapper 不参与布局计算 */
.cards--hidden .wrapper {
height: 0;
padding: 0;
border: none;
overflow: hidden;
}
JavaScript 逻辑保持简洁，仅需切换类名，无需操作内联样式：
document.addEventListener("DOMContentLoaded", () => {
const button = document.querySelector(".btn__expand");
const hiddenGroups = document.querySelectorAll(".cards--hidden");
let currentIndex = 0;
button.addEventListener("click", () => {
if (currentIndex = hiddenGroups.length) {
button.style.display = "none";
}
});
});
⚠️ 注意事项：
- grid-template-rows: 0fr 仅在显式声明 display: grid 的容器上生效，务必避免在 .cards--active 中遗漏 display: grid；
- fr 单位过渡需配合 overflow: hidden，否则内容可能溢出导致抖动；
- 若需支持旧版浏览器，可降级为 max-height 过渡（但会牺牲 Grid 布局精度）；
- row-gap 本身不会为 display: none 元素保留间隙，因此确保隐藏逻辑最终触发 display: none（如对 .items 子项）而非仅靠父容器坍缩——本方案通过父容器 0fr + height: 0 已足够。
综上，平滑展开的本质是维持布局上下文稳定，而消除冗余间隙的关键是让隐藏状态真正脱离文档流计算。将网格声明外提、精准控制容器高度、辅以高性能缓动函数，即可达成丝滑、无干扰的展开体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
