您想要minmax（10px，1fr）而不是1FR

许多网页都使用类似这样的网格布局：

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

但我建议大家应该使用：

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

为什么呢？在第一种情况下，网格列的最小宽度是 min-content，这可能会意外地比你想要的更宽（参见：网格溢出）。在第二种情况下，你将最小宽度限制为 10px（而不是零，这样它就不会消失并导致更多混淆）。

虽然这样做有点麻烦，但这能带来更可预测的行为并避免不必要的麻烦。

这就是全部内容。

(本文格式参考了 Kilian 的文章“你需要 overflow: auto，而不是 overflow: scroll”，这同样是正确的。)

以上是您想要minmax（10px，1fr）而不是1FR的详细内容。更多信息请关注PHP中文网其他相关文章！