如何让多组CSS Grid/Flexbox的对应列宽保持统一？

一、CSS Grid 子网格（Subgrid）方案（推荐） #

可以通过CSS Grid的**子网格（Subgrid）**特性实现，这是专门为解决多个网格容器列宽对齐场景设计的，纯CSS无需JavaScript。

实现思路 #

1. 将所有.parent容器包裹在一个父级网格容器中，由父容器定义3列的宽度规则（fit-content(100px) auto fit-content(100px)）；
2. 每个.parent容器设置为网格容器，并通过grid-template-columns: subgrid继承父网格的列定义，这样所有.parent的对应列会自动取各列的最大宽度统一对齐。

代码示例 #

/* 父级网格容器，控制全局列宽规则 */
.grid-wrapper {
  display: grid;
  grid-template-columns: fit-content(100px) auto fit-content(100px);
  gap: 1rem; /* 可选，控制各.parent容器之间的间距 */
}

/* 每个子网格容器，继承父网格的列定义 */
.parent {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1; /* 让每个.parent占满父网格的全部3列 */
  gap: 0.5rem; /* 可选，控制.parent内部列之间的间距 */
}

<div class="grid-wrapper">
  <div class="parent">
    <div>短首列</div>
    <div>中间列填充剩余空间</div>
    <div>较长的末列内容</div>
  </div>
  <div class="parent">
    <div>非常长的首列内容示例</div>
    <div>中间列</div>
    <div>短末列</div>
  </div>
</div>

兼容性 #

现代主流浏览器均支持：Chrome 117+、Firefox 71+、Edge 117+、Safari 16.4+。

二、Flexbox + JavaScript 方案（兼容旧浏览器） #

如果需要兼容不支持子网格的旧浏览器，可以用Flexbox结合JavaScript计算列的最大宽度，强制统一列宽。

实现思路 #

1. 给每一列添加统一的类名（如.col-1、.col-2、.col-3）；
2. Flex布局中让首列、末列不收缩（flex-shrink: 0），中间列自动填充剩余空间（flex-grow: 1）；
3. 通过JavaScript遍历所有列，计算首列和末列的最大宽度，设置为对应列的min-width，实现统一宽度。

代码示例 #

.flex-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.parent {
  display: flex;
  gap: 0.5rem;
}

.col-1, .col-3 {
  flex-shrink: 0; /* 防止列被压缩 */
}

.col-2 {
  flex-grow: 1; /* 填充剩余空间 */
}

<div class="flex-wrapper">
  <div class="parent">
    <div class="col-1">短首列</div>
    <div class="col-2">中间列填充剩余空间</div>
    <div class="col-3">较长的末列内容</div>
  </div>
  <div class="parent">
    <div class="col-1">非常长的首列内容示例</div>
    <div class="col-2">中间列</div>
    <div class="col-3">短末列</div>
  </div>
</div>

// 计算并设置首列最大宽度
const col1Els = document.querySelectorAll('.col-1');
const maxCol1Width = Math.max(...Array.from(col1Els).map(el => el.offsetWidth));
col1Els.forEach(el => el.style.minWidth = `${maxCol1Width}px`);

// 计算并设置末列最大宽度
const col3Els = document.querySelectorAll('.col-3');
const maxCol3Width = Math.max(...Array.from(col3Els).map(el => el.offsetWidth));
col3Els.forEach(el => el.style.minWidth = `${maxCol3Width}px`);

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