使用auto-fit/auto-fill的CSS Grid布局小设备溢出如何解决？

问题根源 #

你当前写法的核心问题是minmax(200px, 250px)的最小值为固定像素值，当视口宽度小于「单列最小宽度+网格间距+页面边距」的总和时，网格列不会继续收缩，导致容器溢出。

排查步骤 #

• 首先检查是否有全局box-sizing: border-box声明：如果没有该配置，子元素的1.5rem内边距会叠加在网格列宽度上，导致子元素实际宽度大于你设定的200px最小值，直接触发溢出。
• 其次检查.modelContainer的外层容器：确认外层没有多余的横向边距，且没有固定宽度限制，父容器自身宽度默认适配视口。
• 最后检查小视口下的内容宽度：确认子元素内的文本、图片等内容没有硬编码的固定宽度撑破容器。

具体修复方案 #

1. 新增全局盒模型重置（必加） #

先在全局样式中加入盒模型声明，避免内边距撑开元素宽度：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 修改网格容器配置 #

调整grid-template-columns写法，用min()函数包裹最小值，让小屏幕下列宽可以自适应视口，同时给容器加横向内边距避免贴边：

.modelContainer {
    display: grid;
    /* 最小值优先取200px，当视口小于200px时自动取100%适配 */
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 250px));
    gap: 2rem;
    justify-content: center;
    max-width: 100%;
    padding: 0 1rem; /* 左右内边距，小屏幕下不会贴边 */
}

3. 优化子元素样式 #

修改图片最大宽度为100%，同时增加文本换行规则，避免内容溢出：

.defaultModel {
    display: flex;
    flex-direction: column;
    background-color: rgb(27, 27, 27) !important;
    border-radius: 1rem;
    padding: 1.5rem;
    word-wrap: break-word; /* 长文本自动换行 */
    max-width: 100%;

    img {
        margin: auto;
        max-width: 100%; /* 自适应子元素宽度，不会撑破容器 */
        margin-bottom: 1rem;
    }
    p, h6 {
        text-align: center;
    }
    p {
        font-weight: bold;
        margin: 1rem 0;
        font-size: 1.25rem !important;
    }
    h6 {
        margin: 0;
    }
}

修改后网格元素会在200px到250px区间内自适应排列，小屏幕下自动缩小到适配视口宽度，不会出现溢出问题。

内容的提问来源于stack exchange，提问作者ShayShoq