CSS实现隐藏元素平滑展开及消除Grid行间隙问题

我正在开发一个包含可见与隐藏内容的Web布局，已实现按钮触发隐藏内容平滑展开的过渡效果，但遇到两个核心问题：

1. 为grid-template-rows属性添加CSS过渡后，展开动画仍未达到理想的流畅度，如何优化平滑过渡效果？
2. 隐藏元素采用Grid布局时，row-gap仍会为其预留空间，导致布局出现视觉间隙，如何修改CSS使row-gap仅作用于可见元素？

解决方案 #

1. 优化展开动画流畅度 #

用grid-template-rows: 0fr过渡到1fr的方式，部分浏览器对fr单位的过渡支持不够顺滑，换用max-height过渡兼容性更好，动画更流畅：

修改CSS中.cards--hidden和.cards--active的样式：

.cards--hidden {
  display: grid;
  max-height: 0;
  transition: max-height 300ms ease-in-out;
  overflow: hidden;
  row-gap: 0; /* 同时解决row-gap预留空间问题 */
  margin-bottom: 0; /* 移除隐藏状态下的底部间隙 */
  padding: 0 15px; /* 保留左右padding避免激活时跳动 */
  border: 1px solid transparent; /* 透明边框避免激活时边框跳动 */
}

.cards--active {
  max-height: 1000px; /* 设为比内容实际高度大的值 */
  row-gap: 20px; /* 激活后添加行间距 */
  margin-bottom: 20px; /* 恢复激活状态的底部margin */
  padding: 15px;
  border-color: #000;
}

注：max-height的值可以根据实际内容高度调整，确保能完全容纳展开后的内容。

2. 让row-gap仅作用于可见元素 #

Grid的row-gap会对所有网格行生效，包括高度为0的隐藏行。通过以下方式解决：

• 隐藏状态（.cards--hidden）下设置row-gap: 0，同时移除容器的margin-bottom，添加透明边框和左右padding避免激活时布局跳动
• 激活状态（.cards--active）下恢复row-gap、margin-bottom、正常padding和边框
• 结合max-height过渡，既能消除间隙，又能保证动画流畅

修改后完整代码 #

HTML（无需修改） #

<section>
  <div class="visible">
    <div class="wrapper">
      <div class="items">
        <div class="item__title">
          <h2>Visible Item 1 Title</h2>
          <p>Description for Visible Item 1</p>
        </div>
      </div>
      <div class="items">
        <h2>Visible Item 2 Title</h2>
        <p>Description for Visible Item 2</p>
      </div>
      <div class="items">
        <h2>Visible Item 3 Title</h2>
        <p>Description for Visible Item 3</p>
      </div>
    </div>
  </div>
  <div class="cards cards--hidden">
    <div class="wrapper">
      <div class="items">
        <div class="item__title">
          <h2>Hidden Item 1 Title</h2>
          <p>Description for Hidden Item 1</p>
        </div>
      </div>
      <div class="items">
        <h2>Hidden Item 2 Title</h2>
        <p>Description for Hidden Item 2</p>
      </div>
      <div class="items">
        <h2>Hidden Item 3 Title</h2>
        <p>Description for Hidden Item 3</p>
      </div>
    </div>
  </div>
  <div class="cards cards--hidden">
    <div class="wrapper">
      <div class="items">
        <div class="item__title">
          <h2>Hidden Item 1 Title</h2>
          <p>Description for Hidden Item 1</p>
        </div>
      </div>
      <div class="items">
        <h2>Hidden Item 2 Title</h2>
        <p>Description for Hidden Item 2</p>
      </div>
      <div class="items">
        <h2>Hidden Item 3 Title</h2>
        <p>Description for Hidden Item 3</p>
      </div>
    </div>
  </div>
  <div class="btn__expand">
    <span class="btn__label">Expand all data</span>
  </div>
</section>

CSS（修改后的样式） #

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  padding: 20px;
}

.visible, .cards--active {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #000;
  box-shadow: 5px 5px 0px #000;
}

.wrapper {
  border: 2px solid #000;
  padding: 10px;
  min-height: 0;
  overflow: hidden;
}

.items {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #e0e0e0;
  border: 1px solid #000;
}

.item__title h2 {
  font-size: 20px;
  margin: 0 0 5px 0;
  color: #000;
}

.item__title p {
  font-size: 16px;
  margin: 0;
  color: #333;
}

.cards--hidden {
  display: grid;
  max-height: 0;
  transition: max-height 300ms ease-in-out;
  overflow: hidden;
  row-gap: 0;
  margin-bottom: 0;
  padding: 0 15px;
  border: 1px solid transparent;
  box-shadow: none;
}

.cards--active {
  max-height: 1000px;
  row-gap: 20px;
  box-shadow: 5px 5px 0px #000;
}

.btn__expand {
  cursor: pointer;
}

JavaScript（无需修改） #

document.addEventListener("DOMContentLoaded", () => { 
  const button = document.querySelector(".btn__expand"); 
  let currentIndex = 0; 
  let hiddenGroups = document.querySelectorAll(".cards--hidden"); 

  button.addEventListener("click", function() { 
    if (currentIndex < hiddenGroups.length) { 
      hiddenGroups[currentIndex].classList.remove("cards--hidden"); 
      hiddenGroups[currentIndex].classList.add("cards--active"); 
      currentIndex++; 
    } 
    if (currentIndex >= hiddenGroups.length) { 
      button.style.display = "none"; 
    } 
  }); 
});

内容的提问来源于stack exchange，提问作者krnnnnn