如何让CSS Grid自动换行且列宽适配最宽网格项内容？

问题背景 #

你需要搭建一个可自动换行的CSS Grid布局，要求列宽由网格内最宽的内容决定，而非硬编码固定值。此前尝试将minmax()中的固定宽度替换为min-content时被浏览器判定无效，改用grid-auto-columns: min-content又导致每个网格项独占一行。

解决方案 #

方案1：现代浏览器原生支持（推荐） #

目前Chrome 57+、Firefox 52+、Safari 10.1+等主流浏览器已支持在minmax()函数中使用max-content/min-content关键字，无需额外代码即可实现需求：

固定列宽为最宽内容宽度（不拉伸）

该写法会让所有列的宽度等于网格中最宽内容的宽度，一行内尽可能容纳更多列，空间不足时自动换行：

#grid {
  display: grid;
  width: 256px;
  border: 1px solid black;
  grid-gap: 12px;
  grid-template-columns: repeat(auto-fit, max-content);
}

#grid span {
  background-color: lightgray;
}

列宽最小为最宽内容宽度，空间充足时拉伸填充

若希望容器宽度足够时，列能自动拉伸填满剩余空间，可使用minmax(max-content, 1fr)：

#grid {
  display: grid;
  width: 256px;
  border: 1px solid black;
  grid-gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
}

#grid span {
  background-color: lightgray;
}

方案2：兼容旧浏览器（JS辅助计算） #

如果需要兼容不支持max-content在minmax()中使用的旧浏览器，可通过JavaScript计算最宽网格项的宽度，再通过CSS变量传递给Grid布局：

JavaScript代码

const gridContainer = document.getElementById('grid');
const gridItems = Array.from(gridContainer.children);

// 计算所有网格项的最大宽度（强制内容不换行保证计算准确）
const maxItemWidth = Math.max(...gridItems.map(item => {
  item.style.whiteSpace = 'nowrap';
  return item.offsetWidth;
}));

// 将最大宽度赋值给CSS变量
gridContainer.style.setProperty('--max-item-width', `${maxItemWidth}px`);

CSS代码

#grid {
  --max-item-width: 75px; /* 降级备用值 */
  display: grid;
  width: 256px;
  border: 1px solid black;
  grid-gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(var(--max-item-width), 1fr));
}

#grid span {
  background-color: lightgray;
}

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