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

Question

我正在使用以下内容创建一个网格，可以从三列扩展到两列，然后在移动设备上扩展一个：

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

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

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

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

Answer 1

如果您不希望容器溢出屏幕，则必须设置

max-width

到一定的宽度。 然后，您可以使用

创建滚动条

overflow: auto;
/*or*/
overflow: scroll;
/*or*/
overflow: visible;

如果你想隐藏滚动条，你只需要使用隐藏而不是自动。

overflow: hidden;

如果所有这些都没有帮助，请尝试使文本大小更小，因为它也可能是容器溢出的原因（如果单词比容器本身长）。

Answer 2

您可以将 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));

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