如何设置CSS网格列宽为1fr与100px中的较小值？

你写的代码无效是因为min()函数里不能同时混用fr单位和px这类绝对长度单位。fr是基于网格容器剩余可用空间计算的相对单位，和绝对单位不属于同一维度，浏览器没法直接比较这两个值，所以会判定这个属性值无效。

要实现“取1fr和100px中较小值”的效果，有两种常用方法：

方法一：用calc()转换相对空间 #

把1fr转换成基于容器宽度的百分比计算，这样就能和100px在min()里比较了。如果网格有间隙，记得把间隙的宽度也减去：

.my-grid {
  display: grid;
  gap: 10px; /* 假设间隙是10px */
  grid-template-columns: repeat(3, min(100px, calc((100% - 2 * 10px) / 3)));
}

这里calc((100% - 2 * 10px) / 3)就等同于1fr的计算逻辑（3列平分容器宽度，减去2个间隙的总宽度），min()会自动取这个计算值和100px里更小的那个。

方法二：限制容器最大宽度 #

给网格容器设置最大宽度，让它最多只能容纳3个100px的列加间隙，同时列宽用minmax(0, 100px)，这样容器宽度足够时列保持100px，容器变窄时列会自动收缩到容器宽度的1/3（相当于1fr的效果）：

.my-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 100px));
  max-width: calc(3 * 100px + 2 * 10px);
  width: 100%;
}

内容的提问来源于stack exchange，提问作者Some Noob Student