使用minmax(10px, 1fr)代替1fr避免踩坑

grid布局的常见写法如下

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

这样写存在一些问题：grid column的最小宽度是它的min-content，使用<pre>,<image> 可能会溢出1fr的大小。

推荐写法如下

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(10px, 1fr));
}

给了10px的最小宽度值。解决了最小宽度不确定导致的溢出问题、同时10px最小宽度比起0px避免了元素直接消失，当问题出现时可减小调试成本。

来源：You want minmax(10px, 1fr) not 1fr