CSS Grid问题：两个独立父容器的子元素等高实现

我有两个独立的div父容器，各自包含若干子元素。子元素数量会动态增减，高度因内容多少而异。需要实现两个容器下所有子元素高度一致。此前尝试用单个父容器并在第二组子元素前插入‘Section 2’标题，但新增子元素时布局错乱（比如Section 2的子元素出现在标题上方），因此改用两个独立div容器。

方案一：JS动态计算+CSS适配（推荐，支持动态元素） #

通过JavaScript获取所有子元素的最大高度，统一设置给所有子元素，同时监听窗口变化和元素增删事件，保证高度实时同步。

完整代码 #

HTML（保持原有结构不变）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container d-flex flex-column flex-grow-1 justify-content-center">
  <div class="row text-center">
    <div class="col-12 text-center">
      <div class="doc-details-grid-wrapper">
        <div class="doc-details-title">
          <h4>Section 1</h4>
          <hr>
        </div>
        <div class="doc-details-grid">
          <a href="" class="box callout">
            <h5>Section 1 Box 1</h5>
            <p>Short description goes here. This is where you can provide a brief preview about the contents of the downloadable PDF document.</p>
          </a>
          <a href="" class="box callout">
            <h5>Section 1 Box 2</h5>
            <p>Short description goes here.</p>
          </a>
          <a href="" class="box callout">
            <h5>Section 1 Box 3</h5>
            <p>This is where you can provide a brief preview about the contents of the downloadable PDF document.</p>
          </a>
          <a href="" class="box callout">
            <h5>Section 1 Box 4</h5>
            <p>This is where you can provide a brief preview about the contents of the downloadable PDF document. This description is a little longer than the others.</p>
          </a>
          <a href="" class="box callout">
            <h5>Section 1 Box 5</h5>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-12 text-center">
      <div class="doc-details-grid-wrapper">
        <div class="doc-details-title">
          <h4>Section 2</h4>
          <hr>
        </div>
        <div class="doc-details-grid">
          <a href="" class="box callout">
            <h5>Section 2 Box 1</h5>
            <p>Short description goes here.</p>
          </a>
          <a href="" class="box callout">
            <h5>Section 2 Box 2</h5>
            <p>Short description goes here.</p>
          </a>
          <a href="" class="box callout">
            <h5>Section 2 Box 3</h5>
            <p>This is where you can provide a brief preview.</p>
          </a>
          <a href="" class="box callout">
            <h5>Section 2 Box 4</h5>
            <p>This description is a little longer than the others.</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

CSS 调整（优化内部布局对齐）

:root {
  --primary-blue: #2a88a6;
  --black: #333333;
  --body-copy: #4f4f4f;
  --body-copy-inverse: #ffffff;
  --chart-dark-gray: #828282;
  --chart-light-gray: #e0e0e0;
  --yellow: #fed895;
}
.callout {
  background-color: var(--chart-dark-gray);
  color: #fff;
  padding: 20px;
}
.callout > h5 {
  color: var(--yellow);
}
.doc-details-grid-wrapper {
  margin: 40px 0 50px;
}

.doc-details-grid-wrapper h4 {
  padding-bottom: 0;
  text-align: left;
}

.doc-details-title {
  padding: 0 15px;
}

.doc-details-grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(3, 1fr);
  margin: 10px 0 50px;
  min-height: 200px;
  list-style: none;
}

.doc-details-grid > a {
  background-color: #2a88a6;
  display: flex;
  flex-direction: column;
}

.doc-details-grid > a:hover {
  background-color: #136a85;
}

.doc-details-grid > a:last-child {
  grid-column-start: 2;
}

.doc-details-grid h5 {
  padding-bottom: 0;
}

.doc-details-grid p {
  color: #ffffff;
  flex-grow: 1; /* 让描述填充剩余空间，保证标题对齐 */
}

.box {
  margin: 10px;
  border-radius: var(--bs-border-radius-lg) !important;
}

@media (min-width: 768px) {
  .masthead {
    max-width: none;
    min-height: 70vh;
  }
  h1 {
    font-size: calc(1rem + 2.3vw);
    margin: unset !important;
  }
  .docs-grid > a {
    display: flex;
    flex-basis: calc(50% - 40px);
    justify-content: center;
    flex-direction: column;
  }
}

JS 同步高度逻辑

function syncBoxHeights() {
  let maxHeight = 0;
  // 先重置所有盒子高度为auto，避免历史设置干扰计算
  $('.box').each(function() {
    $(this).height('auto');
    const currentHeight = $(this).outerHeight();
    if (currentHeight > maxHeight) {
      maxHeight = currentHeight;
    }
  });
  // 给所有盒子设置统一高度
  $('.box').height(maxHeight);
}

// 页面加载完成后初始化
$(document).ready(function() {
  syncBoxHeights();
  
  // 监听窗口大小变化，重新计算高度
  $(window).resize(function() {
    syncBoxHeights();
  });
  
  // 若有新增/删除子元素的操作，执行完后调用syncBoxHeights()
  // 示例：
  // $('#add-btn').click(function() {
  //   // 新增子元素的代码
  //   syncBoxHeights();
  // });
});

方案二：纯CSS Grid 适配（仅子元素行数一致时可用） #

如果两个容器的子元素行数完全对应，可以利用Grid的grid-auto-rows: 1fr让每行高度统一，但无法跨容器同步，仅适用于子元素数量和排列完全匹配的场景，局限性较大。

关键说明 #

1. flex-grow: 1 确保盒子内部的描述文本填充剩余空间，标题始终对齐顶部。
2. JS中先重置高度为auto，保证每次计算的是元素真实内容高度。
3. 动态增删子元素后必须调用syncBoxHeights()，否则高度不会自动更新。

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