CSS Grid使用repeat(auto-fill)和minmax后列宽不一致如何解决

问题根因 #

你当前的grid-template-columns配置中，minmax(5rem, auto)的最大值参数用了auto，这个值的特性是会根据列内内容的宽度调整列宽，所以内容更长的网格项对应的列宽度会更大，最终导致所有子项宽度不一致。
你遇到的问题效果如下：

解决方案 #

只需要把minmax的最大值从auto替换为1fr即可，修改后的CSS代码如下：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 1rem;
}

.item {
  background-color: red;
  /* 可选补充：如果列内存在超长无换行的文本，可添加以下规则避免内容撑破容器
  overflow: hidden;
  word-break: break-all;
  */
}

原理解释 #

fr是Grid布局的专属分数单位，1fr代表占据网格容器可用空间的1份。当所有自动生成的列最大尺寸都设为1fr时，容器的可用空间会被平均分配给每一列，自然所有网格项的宽度就会保持完全一致，同时minmax的最小值配置5rem仍然生效，能保留你需要的响应式自动调整列数量的效果。

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