CSS Grid如何根据最宽嵌套元素尺寸自动渲染等宽列

硬编码百分比列宽导致溢出的本质是：固定了单列最小宽度的容器占比，当内容宽度超过这个占比时，1fr分配的列宽不足以容纳内容就会溢出。手动调整为33%只是针对当前内容的静态适配，无法自动适配不同长度的内容集合。
根据需求有两种可落地的实现方式：

纯CSS实现（无JS，通用场景首选） #

不需要写死百分比最小宽度，改用字符单位做最小宽度基准，同时给网格项加断词兜底，就能实现自动适配列数、等宽、不溢出的效果：

/* 网格容器 */
.vocab-grid {
  display: grid;
  /* 核心：自动适配列数，单列最小宽度按常用词汇长度设为12ch（可根据业务词汇长度调整），最大自动均分剩余空间 */
  grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
  gap: 1rem; /* 替换为实际需要的间距值 */
}
/* 网格项兜底样式 */
.vocab-grid-item {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

该方案兼容所有现代浏览器，对于词汇类场景适配性足够，不需要额外脚本，列数会随容器宽度自动调整，所有列保持等宽，超长词汇会自动断行不会溢出。

少量JS辅助（100%匹配需求） #

如果要求严格以当前渲染的所有词汇块里最宽的那个宽度为统一列宽，不需要手动预估ch值，可以在内容渲染完成后加几行脚本动态计算列宽：

// 页面内容渲染完成后执行
const grid = document.querySelector('.vocab-grid');
const items = grid.querySelectorAll('.vocab-grid-item');
function updateGridColumns() {
  let maxItemWidth = 0;
  // 遍历计算所有项的最大内容宽度
  items.forEach(item => {
    item.style.width = 'fit-content';
    maxItemWidth = Math.max(maxItemWidth, item.getBoundingClientRect().width);
    item.style.width = '';
  });
  // 动态设置网格列规则
  grid.style.gridTemplateColumns = `repeat(auto-fit, minmax(${maxItemWidth}px, 1fr))`;
}
// 初始化渲染网格
updateGridColumns();
// 窗口宽度变化时重新计算，加防抖避免频繁触发造成性能损耗
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(updateGridColumns, 100);
});

该方案完全匹配需求：不管当前内容集合里的词汇多长，所有列宽度统一等于最宽词汇块的宽度，列数随容器宽度自动增减，不会出现内容溢出，也不需要手动调整列宽占比。

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