如何使用CSS（含flex布局）实现每行卡片标题与该行最高标题等高

结论 #

• 纯Flex布局无法直接实现该需求：Flex只能保证同一行的.card-container整体高度一致，无法跨不同容器同步内部.card-title的高度。
• 可以通过CSS实现该需求，推荐使用CSS Grid + subgrid方案，Chrome 117+、Firefox 71+、Safari 16+等现代主流浏览器均已支持；如需兼容旧版本浏览器，可搭配少量JS实现。

方案1：CSS Grid + subgrid（推荐） #

无需固定高度、无需JS，完全自动适配同行动态高度：

调整CSS代码如下： #

.container {
  width:900px;
  margin:0 auto;
}

.cards-container {
  /* 替换原有flex配置为grid */
  display: grid;
  /* 一行4列，对应你原有flex布局的展示效果 */
  grid-template-columns: repeat(4, 1fr);
  /* 行间距20px，列间距2%，对应原有margin设置 */
  gap: 20px 2%;
}

.card-container {
  /* 替换原有flex配置为grid，开启subgrid */
  display: grid;
  /* 继承父容器的行轨道配置，实现跨行高度同步 */
  grid-template-rows: subgrid;
  /* 卡片内部最多有6个元素（title/offer/price/description/link/points），所以占6行 */
  grid-row: span 6;
  /* 原有其余配置保留，删除margin改为通过父容器gap控制间距 */
  margin: 0;
  align-items:center;
  border:1px solid black;
  padding:10px 20px;
}

/* 其余原有CSS代码保持不变即可 */
.card-offer {
  color:red;
  margin-bottom:10px;
}

.card-price {
  color:purple;
  margin-bottom:15px;
  font-size:20px;
}

.card-description {
  margin-bottom:30px;
}
.card-link {
  color:blue;
}

.card-title {
  margin-bottom:20px;
  text-align:center;
}

.card-points ul {
  padding-left:0;
}

.card-points li {
  list-style:none;
}

调整后同一行所有卡片的.card-title会自动同步最高高度，card-offer模块自然对齐，卡片其余内容的高度依然可以自适应变化。

方案2：JS兼容方案（适配不支持subgrid的旧浏览器） #

如果需要兼容低版本浏览器，可以添加少量JS实现高度同步，可保留原有Flex布局代码无需修改：

新增JS代码： #

function syncCardTitleHeights() {
  const cards = Array.from(document.querySelectorAll('.card-container'));
  if (!cards.length) return;

  // 先清空之前设置的高度，避免resize时计算错误
  document.querySelectorAll('.card-title').forEach(title => title.style.height = 'auto');

  const rowGroups = [];
  let currentRowTop = null;
  let currentGroup = [];

  // 按垂直位置分组，同一行的卡片offsetTop一致
  cards.forEach(card => {
    const top = card.offsetTop;
    if (currentRowTop === null || top !== currentRowTop) {
      if (currentGroup.length) rowGroups.push(currentGroup);
      currentRowTop = top;
      currentGroup = [card];
    } else {
      currentGroup.push(card);
    }
  });
  if (currentGroup.length) rowGroups.push(currentGroup);

  // 每行统一设置标题高度为该行最大高度
  rowGroups.forEach(group => {
    const maxTitleHeight = Math.max(...group.map(card => card.querySelector('.card-title').offsetHeight));
    group.forEach(card => {
      card.querySelector('.card-title').style.height = `${maxTitleHeight}px`;
    });
  });
}

// 页面加载完成后执行
window.addEventListener('load', syncCardTitleHeights);
// 窗口尺寸变化时重新计算
window.addEventListener('resize', syncCardTitleHeights);

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