如何解决CSS Grid minmax(30rem,1fr)在容器窄于30rem时的横向滚动条问题？

嘿，我懂你遇到的这个小麻烦——用grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr))布局的时候，一旦容器宽度小于30rem就会出现讨厌的横向滚动条，你想实现那种“窄屏自动适配容器宽度，宽屏按1fr均分”的效果对吧？

其实你的思路完全没问题，只需要把minmax()里的固定最小值换成能自适应容器宽度的表达式就行。直接用min(30rem, 100%)作为minmax()的最小值就可以解决：

grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr));

原理解释 #

原来的写法里，minmax(30rem, 1fr)的最小值是固定的30rem，当容器宽度小于这个值时，Grid会强制列宽不小于30rem，自然就超出容器产生滚动条了。而min(30rem, 100%)会自动判断：如果容器宽度≥30rem，就取30rem；如果容器宽度<30rem，就取容器的100%宽度，这样列宽永远不会超出容器的可用空间，滚动条也就消失了。

你也可以用clamp()函数来达到同样的效果，写法更简洁：

grid-template-columns: repeat(auto-fill, clamp(30rem, 100%, 1fr));

clamp(min, preferred, max)在这里的作用和minmax(min(30rem, 100%), 1fr)完全一致，根据容器宽度自动切换列宽的取值。

修改后的示例代码片段 #

对应你给出的ul样式，修改后应该是这样：

ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr));
  grid-auto-rows: 1fr;
  /* 保留你原来的其他样式 */
}

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