如何实现多个CSS Grid共享自动适配的列宽？

目前原生CSS没有像WPF SharedSizeGroup那样直接跨独立元素同步尺寸的特性，但可以通过「CSS变量+JavaScript」实现完全符合需求的效果，也有一些仅限特定场景的纯CSS变通方法。

一、JavaScript 通用方案（推荐，可扩展） #

这个方案能自动计算所有目标Grid对应列的最大内容宽度，同步设置给所有Grid，同时保留auto-fit的自适应列数行为，还不影响Grid的独立性（可以单独设置样式、布局）。

实现步骤： #

1. 给所有需要共享列宽的Grid加统一类名，比如shared-grid。
2. 编写JS逻辑：

   // 目标Grid类名
   const targetGridClass = 'shared-grid';
   const grids = document.querySelectorAll(`.${targetGridClass}`);
   const columnMaxWidths = [];
   
   // 遍历所有Grid，收集每一列的最大宽度
   grids.forEach(grid => {
     const colItems = grid.children; // 获取Grid的直接子元素（列项）
     Array.from(colItems).forEach((item, index) => {
       // 获取列项的实际内容宽度（用getBoundingClientRect更精准）
       const itemWidth = item.getBoundingClientRect().width;
       // 更新对应列的最大宽度
       if (!columnMaxWidths[index] || itemWidth > columnMaxWidths[index]) {
         columnMaxWidths[index] = itemWidth;
       }
     });
   });
   
   // 把最大宽度存入全局CSS变量
   // 两种模式可选：
   // 模式1：所有列用同一个宽度（取所有列中的最大值）
   const globalMaxWidth = Math.max(...columnMaxWidths);
   document.documentElement.style.setProperty('--shared-col-width', `${globalMaxWidth}px`);
   
   // 模式2：对应列分别同步宽度（第1列统一、第2列统一...）
   columnMaxWidths.forEach((width, idx) => {
     document.documentElement.style.setProperty(`--col-${idx+1}-width`, `${width}px`);
   });
   
   // 可选：窗口大小变化时重新计算
   window.addEventListener('resize', () => {
     // 重复上面的计算逻辑即可，建议封装成函数复用
   });
   

3. 配合CSS使用：

   /* 模式1：所有列宽度统一，auto-fit自适应列数 */
   .shared-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(var(--shared-col-width), 1fr));
     gap: 1rem; /* 可选，设置列间距 */
     /* 可以单独加自己的样式，比如background、padding */
     padding: 1rem;
     background: #f5f5f5;
   }
   
   /* 模式2：对应列分别同步宽度，固定3列布局 */
   .shared-grid {
     display: grid;
     grid-template-columns: var(--col-1-width) var(--col-2-width) var(--col-3-width);
     gap: 1rem;
   }
   

扩展技巧： #

• 把计算逻辑封装成函数，支持传入不同的Grid类名、是否监听窗口变化等参数，方便复用。
• 如果需要考虑元素动态变化（比如异步加载内容），可以在内容更新后重新调用计算函数。

二、纯CSS变通方案（仅限特定场景） #

如果所有需要共享列宽的Grid都在同一个父容器里，可以用父容器的Grid布局间接实现，但代价是子Grid会失去部分独立性：

/* 父容器设置为Grid，控制列宽 */
.grid-parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));
  gap: 1rem;
}

/* 子Grid不再单独设置列布局，让子元素直接参与父Grid的布局 */
.shared-grid {
  display: contents;
  /* 注意：display: contents会让Grid本身不在布局树中，无法设置padding、background等样式 */
}

这个方案仅适合不需要给子Grid单独加样式的场景，实用性有限。

总结 #

如果要完全保留Grid的独立性、支持任意布局场景，JavaScript方案是最优选择，能精准实现类似WPF SharedSizeGroup的共享列宽效果，同时保留auto-fit的自适应特性。纯CSS方案只能在有限场景下临时用用。

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