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

Question

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

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

它工作正常，除了在移动设备上，最小设置会导致每个元素溢出网格容器(和屏幕)。

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

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

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));

而支持它的浏览器会沿用第二种。