为何CSS Grid的auto-fit/fill列在尺寸计算与换行时不考虑文本大小？

为什么会溢出？ #

auto-fill/auto-fit的计算逻辑只认你在minmax()里设定的最小宽度值（这里是84px），完全不会自动检测内部文本的实际宽度。当屏幕缩小，网格列被压缩到84px的最小限制时，你的大字号文本（29px）加上左右各10px的padding，实际需要的宽度已经超过了84px，自然就会溢出。

解决方案（无需缩放字体） #

方案1：让列宽自动适配内容最小需求

把网格列的最小宽度换成min-content，这样列宽会自动匹配内部文本的实际宽度，不会被强行压缩到比内容还小的尺寸，小屏幕下也会自动换行成合适的列数：

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
  gap: .5em;
  padding: 0;
  list-style: none;
}

li a {
  display: block;
  text-align: center;
  padding: 10px;
  background-color: red;
  color: #fff;
  text-decoration: none;
  font-size: 29px;
}

方案2：兼顾固定最小宽度与内容适配

如果想保留基础的最小宽度控制，可以用min(84px, min-content)，这样当内容宽度小于84px时用设定的固定值，大于时自动适配内容：

ul {
  grid-template-columns: repeat(auto-fill, minmax(min(84px, min-content), 1fr));
}

补充说明 #

你原来的minmax(84px, 1fr)是强制列宽不能低于84px，但实际内容需要的宽度已经超过这个值（可以用浏览器开发者工具查看元素的计算宽度）。auto-fill的逻辑是优先把行填满，只要列宽不低于设定的最小值就会尽量多放列，完全不关心内部内容是否能容纳，这就是溢出的核心原因。

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