大量数据类表格展示样式选型：使用Flex还是Grid？

解决方案 #

你当前的flex布局实现中，各列独立排列，行与行之间没有高度同步关联，所以无法实现自适应对齐，以下是两种可落地的方案：

方案1：CSS Grid + subgrid 实现（无JS，性能最优）

利用subgrid特性让所有列共享父级的行轨道，自动根据最高行同步高度，空行也不会错位，适配动态内容高度：

.data {
  display: grid;
  /* 列宽等分，和原flex效果一致 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  /* 这里的4对应你示例的行数，动态行数可以通过JS设置CSS变量：--row-count */
  grid-template-rows: repeat(var(--row-count, 4), auto);
}

.dataColumn {
  display: grid;
  /* 继承父级行轨道，实现跨列高度同步 */
  grid-template-rows: subgrid;
  grid-row: span var(--row-count, 4);
}

.dataRow {
  border-bottom: 1px solid #000;
  padding: 4px;
  box-sizing: border-box;
  /* 空行最小高度，避免完全坍缩 */
  min-height: 24px;
}

如果行数是动态生成的，只需要在页面加载时用JS计算一次总行列数，给.data设置CSS变量即可：

const columns = document.querySelectorAll('.dataColumn');
const rowCount = Math.max(...Array.from(columns).map(col => col.children.length));
document.querySelector('.data').style.setProperty('--row-count', rowCount);

该方案支持Chrome 115+、Firefox 71+、Safari 16+，覆盖绝大多数现代用户场景。

方案2：JS 动态计算高度（全兼容）

如果需要兼容低版本浏览器，可以通过JS按行索引分组计算最大高度统一设置：

function syncRowHeight() {
  const columns = document.querySelectorAll('.dataColumn');
  const rowCount = Math.max(...Array.from(columns).map(col => col.children.length));
  
  for(let i = 0; i < rowCount; i++) {
    // 收集当前行索引的所有单元格
    const rows = Array.from(columns).map(col => col.children[i]).filter(Boolean);
    // 先重置高度避免之前的设置影响计算
    rows.forEach(row => row.style.height = 'auto');
    // 取当前行最大高度
    const maxHeight = Math.max(...rows.map(row => row.offsetHeight));
    // 统一设置高度
    rows.forEach(row => row.style.height = `${maxHeight}px`);
  }
}

// 页面加载时执行
window.addEventListener('load', syncRowHeight);
// 窗口大小变化时重新计算
window.addEventListener('resize', syncRowHeight);
// 如果有内容动态更新的场景，更新完成后手动调用syncRowHeight()即可

两种方案都不需要设置固定高度，不会出现内容被截断丢失的问题。

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