展开div内隐藏元素致整行下移，如何仅让下方元素下移？

问题根源是CSS Grid默认会强制同一行的所有网格项高度对齐（align-items: stretch），导致单个项高度变化时整行高度被拉高，进而整行下移。要实现点击展开仅影响当前项下方元素的效果，推荐以下两种可行方案：

方案一：Flexbox布局（推荐） #

通过Flexbox的flex-wrap: wrap实现每行3个卡片，同时让每个卡片高度独立，避免行等高强制对齐：

HTML结构 #

<div class="services-container">
  <div class="service-card">
    <h3>服务标题1</h3>
    <button class="toggle-btn">展开详情</button>
    <div class="hidden-content">
      这里是隐藏的服务详情内容，点击按钮展开/收起。
    </div>
  </div>
  <div class="service-card">
    <h3>服务标题2</h3>
    <button class="toggle-btn">展开详情</button>
    <div class="hidden-content">
      这里是隐藏的服务详情内容，点击按钮展开/收起。
    </div>
  </div>
  <!-- 更多服务卡片 -->
</div>

CSS样式 #

.services-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 卡片间距 */
  padding: 20px;
}

.service-card {
  width: calc(33.333% - 13.333px); /* 3列布局，减去间距占比 */
  box-sizing: border-box;
  border: 1px solid #eee;
  padding: 15px;
  align-self: flex-start; /* 关键：让卡片高度由内容决定，不强制行等高 */
}

.hidden-content {
  display: none;
  margin-top: 10px;
  color: #666;
}

.hidden-content.active {
  display: block;
}

JavaScript逻辑 #

document.querySelectorAll('.toggle-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const content = this.nextElementSibling;
    content.classList.toggle('active');
    this.textContent = content.classList.contains('active') ? '收起详情' : '展开详情';
  });
});

方案二：调整CSS Grid布局 #

如果坚持使用Grid，需要关闭行等高强制对齐，让网格项高度自适应内容：

CSS样式修改 #

.services-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列布局 */
  gap: 20px;
  padding: 20px;
  align-items: start; /* 关键：取消行等高对齐，让项顶部对齐 */
}

.service-card {
  border: 1px solid #eee;
  padding: 15px;
}

/* 其余样式同方案一 */

注意事项 #

Grid方案中，同一行的网格项高度仍会决定该行的最小高度，若某行单个项高度大幅增加，该行整体高度仍会变大，下方整行可能出现轻微下移；而Flexbox方案完全不会影响其他列的元素位置，更贴合需求。

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