多行卡片布局下跨卡片对齐子元素的CSS解决方案咨询

方案1：CSS Subgrid（推荐） #

该方案是原生CSS支持的最优解法，无需设置固定高度、自动适配内容变化，完美支持多行卡片场景下的同位置元素对齐需求。

实现原理 #

Subgrid是CSS Grid的扩展特性，可让子网格继承父网格的行/列轨道尺寸，所有卡片的内部行高会自动同步为全局同位置行的最大高度，完全匹配你的需求。

改造后的CSS代码 #

/* 原有代码保留，仅调整以下部分 */
.cards-container {
  /* 替换原flex布局为grid */
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 每行3列，和原有32%宽度效果一致 */
  gap: 1%; /* 替换原有margin边距，控制更统一 */
}

.card {
  background: white;
  /* 移除原flex相关属性，卡片自身设为grid */
  display: grid;
  grid-template-rows: subgrid;
  /* 每个卡片占4行，对应内部h1、p、内容div、ul四个子元素 */
  grid-row: span 4;
}

兼容性说明 #

该特性支持Chrome 117+、Firefox 71+、Safari 16+，覆盖全球90%以上的用户流量，无需修改原有HTML结构，内容变化时会自动重新计算行高。

方案2：JS兜底兼容方案（适配低版本浏览器） #

如果需要兼容不支持Subgrid的旧版本浏览器，可以用少量JS实现相同效果：

function alignCardElements() {
  const cards = document.querySelectorAll('.card');
  const rowCardCount = 3; // 每行卡片数量
  // 按行拆分卡片组
  for(let i = 0; i < cards.length; i += rowCardCount) {
    const currentRowCards = Array.from(cards).slice(i, i + rowCardCount);
    // 四类元素分别计算最大高度并统一赋值
    ['h1', 'p', 'div', 'ul'].forEach(elSelector => {
      // 先重置高度，避免窗口缩放时计算错误
      currentRowCards.forEach(card => card.querySelector(elSelector).style.height = 'auto');
      // 取当前行该类元素的最大高度
      const maxHeight = Math.max(...currentRowCards.map(card => card.querySelector(elSelector).offsetHeight));
      // 统一设置高度
      currentRowCards.forEach(card => card.querySelector(elSelector).style.height = `${maxHeight}px`);
    })
  }
}
// 页面加载、窗口尺寸变化时触发对齐逻辑
window.addEventListener('load', alignCardElements);
window.addEventListener('resize', alignCardElements);

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