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

我使用以下方法创建了一个网格，它可以从三列扩展到两列，然后在mobile上扩展到一列：

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

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

有没有其他方法可以写专栏来防止这种情况

---

i、 e.“最小400px，除非溢出父容器”

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

最大宽度

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

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

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

overflow: hidden;

---

如果所有这些都没有帮助，请尽量减小文本大小，因为这可能也是导致容器溢出的原因（如果单词比容器本身长）。

我认为可能是由于容器上的边距或网格间隙超过父容器的大小而导致溢出。下面是一个示例：。如您所见，当您将窗口的大小调整到小于480px时，它只是将网格项切掉，而不是将其缩小。您可以使用“最大宽度”，因为这会被display:grid忽略。