如何使用CSS Grid的auto-fill实现遵循min-width的等宽列布局？

要实现等宽列布局、保证网格项不小于内容宽度（文本不换行）、自动填充尽可能多列的需求，你原来的repeat(auto-fill, minmax(min-content, 1fr))写法不被支持——原因是auto-fill要求轨道的最小尺寸是可提前计算的固定值，而min-content是依赖内容的动态值，浏览器无法预计算轨道数量。

下面是可行的实现方案：

代码实现 #

<div class="my-grid">
  <div class="my-item">Some potentially pretty long text...</div>
  <div class="my-item">Some other text</div>
  <!-- 更多网格项 -->
</div>

.my-grid {
  display: grid;
  /* 用minmax(0, 1fr)配合auto-fill，让浏览器自动计算可容纳的列数 */
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
  gap: 1rem; /* 统一设置行列间距，替代分开写row-gap和column-gap */
}

.my-item {
  white-space: nowrap; /* 强制文本不换行 */
  min-width: min-content; /* 限制网格项最小宽度为自身内容的宽度 */
}

原理说明 #

1. repeat(auto-fill, minmax(0, 1fr))：让浏览器根据容器宽度自动填充尽可能多的等宽列，1fr保证所有列均分剩余空间，实现等宽效果。
2. min-width: min-content：因为文本不换行，网格项的最小宽度被限制为自身文本的长度。当容器宽度不足以容纳当前列数时，浏览器会自动减少列数，确保每列宽度不小于内容宽度。
3. gap: 1rem：简化行列间距的写法，同时保证网格项之间的间距统一。

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