如何用CSS Grid让所有列宽度与最宽列保持一致？

我正在用CSS Grid做网格布局，想要所有列宽度一致，且这个宽度等于网格里最宽列的宽度。我知道用JS或者display: table能实现，但想纯靠CSS Grid完成（如果可行的话）。

目前的代码如下：

CSS代码 #

* {
  box-sizing: border-box;
}

div {
  display: grid;
  grid-template-columns: repeat(auto-fit, 120px);
  gap: 5px;
}

span {
  padding: 10px;
  border: 1px solid black;
}

HTML代码 #

<div>
  <span>Orange</span>
  <span>Purple</span>
  <span>Aquamarine</span>
  <span>Black</span>
  <span>Brown</span>
  <span>Red</span>
</div>

现在我把列宽固定成了120px，但希望这个宽度能自动适配最宽的"Aquamarine"列的宽度。

直接修改grid-template-columns的取值就能实现，不需要额外的JS或者table布局：

方案1：自动换行且列宽统一为最宽项宽度 #

如果希望网格在容器空间不足时自动换行，同时所有列保持和最宽项一样的宽度，用下面的写法：

div {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max-content, 1fr));
  gap: 5px;
}

这个写法的逻辑是：max-content确保列宽至少能容纳最宽的内容，1fr让列在空间足够时填充容器，但所有列的宽度会统一对齐到最宽项的尺寸。

方案2：列宽严格等于最宽项，超出容器则横向滚动 #

如果不需要自动换行，只想让所有列宽度完全匹配最宽项，直接用：

div {
  display: grid;
  grid-template-columns: repeat(auto-fit, max-content);
  gap: 5px;
}

这种情况下，所有列的宽度都会和"Aquamarine"所在列一致，当总宽度超过容器时，会出现横向滚动条。

补充说明 #

max-content是CSS Grid支持的关键字，它会自动计算出能容纳内容的最小宽度（也就是内容不换行的宽度），通过repeat(auto-fit, ...)把这个宽度应用到所有列，就能实现所有列宽度统一为最宽项的尺寸。

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