如何用CSS Subgrid实现跨多行卡片元素的全局对齐？

你需要搭建一个3×3的卡片网格，要求所有卡片的标题、内容、按钮在全局范围内完美对齐——不管哪张卡片的标题/内容/按钮被撑高，所有卡片的对应元素都自动扩展到这个最大高度。但目前用CSS Subgrid的写法只能让单行内的卡片对齐，跨多行就失效了。

纯CSS Grid全局轨道对齐（推荐方案） #

核心思路是让所有卡片的同类型元素共享网格容器的同一行轨道，而非每个卡片单独用subgrid。

修改后的CSS代码：

.Grid_Container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 定义9行：3组，每组对应一行卡片的标题、内容、按钮轨道 */
  grid-template-rows: repeat(3, auto auto auto);
  gap: 10px;
}

.Grid_Item {
  /* 每个卡片占3行（标题+内容+按钮） */
  grid-row: span 3;
  /* 内部用subgrid继承父级的行轨道 */
  display: grid;
  grid-template-rows: subgrid;
  grid-row: inherit;
}

/* 指定每个子元素的行位置，确保同类型元素共享轨道 */
.Grid_Item h2 {
  grid-row: 1;
}
.Grid_Item p {
  grid-row: 2;
  /* 可选：让内容区域自动填充高度，避免留白 */
  min-height: 100%;
}
.Grid_Item button {
  grid-row: 3;
}

HTML结构无需修改：

<div class="Grid_Container">
  <div class="Grid_Item">
      <h2>短标题</h2>
      <p>简短内容</p>
      <button>按钮</button>
    </div>
  <div class="Grid_Item">
      <h2>这是一个非常长的标题，会占据多行高度</h2>
      <p>这里是很长的内容，会把内容区域撑高，所有卡片的内容区域都会同步这个高度</p>
      <button>点击查看更多</button>
    </div>
  <!-- 重复至9个卡片即可 -->
</div>

原理说明 #

网格容器提前定义了9行（3组auto auto auto），每组对应一行卡片的标题、内容、按钮轨道。每个卡片占据3行，内部用subgrid继承父级的行轨道，再通过grid-row指定子元素的位置，确保所有标题共享同一轨道、内容共享同一轨道、按钮共享同一轨道，自然就实现了全局高度对齐。

兼容旧浏览器的JS辅助方案 #

如果要兼容不支持subgrid的老浏览器，只能用JS计算最大高度来强制对齐：

function alignCardElements() {
  const titles = document.querySelectorAll('.Grid_Item h2');
  const contents = document.querySelectorAll('.Grid_Item p');
  const buttons = document.querySelectorAll('.Grid_Item button');

  // 算出各类型元素的最大高度
  const maxTitleHeight = Math.max(...Array.from(titles).map(el => el.offsetHeight));
  const maxContentHeight = Math.max(...Array.from(contents).map(el => el.offsetHeight));
  const maxButtonHeight = Math.max(...Array.from(buttons).map(el => el.offsetHeight));

  // 给所有元素设置最小高度
  titles.forEach(el => el.style.minHeight = `${maxTitleHeight}px`);
  contents.forEach(el => el.style.minHeight = `${maxContentHeight}px`);
  buttons.forEach(el => el.style.minHeight = `${maxButtonHeight}px`);
}

// 页面加载和窗口大小变化时执行
window.addEventListener('load', alignCardElements);
window.addEventListener('resize', alignCardElements);

配套基础CSS：

.Grid_Container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.Grid_Item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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