如何让使用repeat(auto-fit, minmax())的CSS Grid每行均匀分布项目？

要实现每行项目数量尽可能平均的效果，你可以通过两种方式解决：

方案一：动态自适应列宽（无需媒体查询） #

通过调整minmax()的参数，结合calc()和max()动态限制列的最小宽度，让Grid在不同宽度区间自动切换列数：

div.stats {
  display: grid;
  /* 取180px和容器1/3减去间距的较大值作为列最小宽度 */
  grid-template-columns: repeat(auto-fit, minmax(max(180px, calc((100% - 2rem) / 3)), 1fr));
  gap: 1rem; /* 可选，添加项目间距优化视觉效果 */
}

原理说明： #

• 当容器宽度小于180px*3 + 2rem（约572px）时，calc((100% - 2rem)/3)小于180px，max()会取180px，Grid自动适配为2列（容器放不下3个180px的项目）。
• 当容器宽度在572px~1130px之间时，calc((100% - 2rem)/3)大于180px，Grid固定为3列，6个项目刚好分成两行，每行3个。
• 当容器宽度足够大（能放下6个180px的项目）时，auto-fit自动扩展为6列，满足宽屏需求。

方案二：媒体查询精准控制列数 #

如果需要完全可控的断点，直接用媒体查询指定不同宽度下的列数：

div.stats {
  display: grid;
  gap: 1rem;
}

/* 竖屏手机：2列 */
@media (max-width: 571px) {
  div.stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 横屏手机/平板竖屏：3列 */
@media (min-width: 572px) and (max-width: 1129px) {
  div.stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 电脑/横屏平板：6列 */
@media (min-width: 1130px) {
  div.stats {
    grid-template-columns: repeat(6, 1fr);
  }
}

这种方法可以根据你的实际设计需求，自由调整断点数值，确保布局完全符合预期。

内容的提问来源于stack exchange，提问作者Alessandro Adam Gianni