CSS grid使用minmax且最大值为固定长度时auto-fit失效问题

解决方案 #

核心思路是保留minmax(5rem, 1fr)的自动拉伸、换行能力，通过限制子元素的最大宽度来避免少量元素时宽度过大的问题，不会触发提前换行的异常。

修复后的代码 #

.fixed-layout {
  width: 100%;
  height: 5rem;
  display: grid;
  /* 保留原auto-fit + 1fr的自适应能力 */
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: 1rem;
}

.item{
  background-color: red;
  /* 新增：限制子元素最大宽度，解决少量元素时过宽的问题 */
  max-width: 8rem;
  /* 可选配置：子元素在列宽度超过8rem时的对齐方式，左对齐用start、居中用center、占满列直接删除该行即可 */
  justify-self: start;
}

<div class='fixed-layout'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
</div>

原写法问题说明 #

你把minmax最大值设为固定值8rem时出现两个问题的原因：

1. 子元素不会拉伸：grid列的最大宽度被限制为8rem，剩余空间不会被分配给列，因此元素不会自动拉伸
2. 提前换行：grid计算可容纳列数时，会以minmax的最小值 + gap为基准计算，当最大值为固定值时，不会动态调整列宽适配剩余空间，就会出现明明还有空位却提前换行的问题

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