CSS Grid列宽取max-content与100px较小值的实现方案咨询

你用minmax(max-content, 100px)没效果是因为搞反了minmax的逻辑——minmax(a, b)里a是最小宽度，b是最大宽度。如果列内容的max-content比100px大，这个规则就会要求列宽至少是更大的那个值，同时最多100px，逻辑矛盾自然不生效；如果内容窄，max-content比100px小，规则又会强制列宽至少是max-content，最多100px，结果就会拉到100px，和你要的正好相反。

正确的做法是用min()函数直接取两个值里较小的，把它作为列宽：

.grid-container {
  display: grid;
  /* 自动适配列数，每列取max-content和100px的较小值 */
  grid-template-columns: repeat(auto-fit, min(max-content, 100px));
  gap: 10px;
}

如果是固定列数，比如3列：

.grid-container {
  display: grid;
  grid-template-columns: min(max-content, 100px) min(max-content, 100px) min(max-content, 100px);
  gap: 10px;
}

这个逻辑很直接：min(max-content, 100px)会自动比较内容的最大宽度和100px，选更小的那个作为列宽。窄内容的列会贴合内容宽度，宽内容的列会被限制在100px内，完全符合你的需求。

目前主流浏览器（Chrome、Firefox、Edge、Safari 14+）都支持min()函数和CSS Grid的组合使用，兼容性没问题。

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