如何防止网格项溢出网格？

Question

我使用以下内容创建一个网格，该网格从三列缩放到两列，然后在移动设备上缩放为一列：

grid-template-columns: repeat(auto-fill(minmax(400px,1fr));

它工作正常，但在移动设备上，最小设置会导致每个项目溢出网格容器（和屏幕）。

有没有其他方法可以编写列来防止这种情况？

即“最小 400px，除非它溢出父容器”

Answer 1

您可以替换400px为min(400px, 100%). 这基本上按照你的要求，将最小值设置为 400px，除非它溢出，那么它就是 100%。

但要注意浏览器支持min：https://caniuse.com/?search=min()

最佳实践是放入两个声明：

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

支持它的浏览器将遵循第二个。