小屏幕下 grid-template-columns 使用 auto-fit + minmax() 溢出的主因是父容器未设 box-sizing: border-box 或存在 padding/margin 挤占宽度，需调低 minmax 最小值、设 min-width: 0、适配 gap 与隐式轨道。
小屏幕下 grid-template-columns 用 auto-fit + minmax() 却仍溢出
直接套 repeat(auto-fit, minmax(280px, 1fr)) 并不能保证不溢出，常见原因是父容器带 padding 或 margin 挤占了可用宽度。比如 iPhone SE 屏宽 320px，若容器有 padding: 20px，实际列宽只剩 280px —— 正好卡在 minmax() 下限，内容稍一撑就破界。
- 先检查父容器是否设置了
box-sizing: border-box；没设的话，padding会额外加在 width 外，导致计算偏差 - 把
minmax()的最小值调低一点，例如从280px改成240px，留出安全余量 - 安卓 WebView（尤其 Android 6–8）对
auto-fit支持弱，可临时降级为auto-fill，并加overflow-x: hidden防横向滚动 - 如果网格项内含固定尺寸元素（如
iframe、图表 canvas），它们可能延迟反馈尺寸，造成布局抖动——此时建议用媒体查询兜底，而非纯依赖auto-fit
文字或长 URL 撑开网格项导致视觉溢出
Grid 子项默认有 min-width: auto，遇到无空格长串（如 base64、URL、英文长单词）时，它会拒绝缩小，硬生生把列撑宽。这不是 overflow: hidden 能解决的，必须从尺寸源头压制。
- 给网格项加
min-width: 0，这是触发弹性收缩的前提 - 配合文本断行：对普通段落用
overflow-wrap: break-word，对单行标题用white-space: nowrap; text-overflow: ellipsis; overflow: hidden - 图片必须设
max-width: 100%和height: auto，否则无视网格轨道约束 - 别在子项里写
width: 300px这类固定值——Grid 的弹性逻辑会被直接绕过
gap 在小屏上引发挤压或横向滚动
gap 看似只是间距，但在窄屏下它和 padding 叠加后极易突破视口边界。比如桌面设 gap: 2rem，小屏不调，左右各加 padding: 16px，总横向开销就超出了 320px 宽度。
- 小屏媒体查询中优先调小
column-gap，推荐0.75rem或1rem；row-gap可保持或略减，避免垂直节奏断裂 - 避免用简写
gap: 1.5rem，改用分开声明column-gap和row-gap，方便单独控制 - 某些旧版安卓 WebView 不识别
gap，需加兼容写法：grid-column-gap: 1rem; grid-row-gap: 1rem
隐式网格轨道在小屏下失控生成巨高行
当子项数量超出显式定义的行数，浏览器会自动生成隐式轨道。桌面看着正常，小屏因容器变窄，grid-auto-rows 若没约束，可能生成几十像素高的空白行，或反过来——某张大图触发隐式行高度暴涨，导致页面莫名拉长、滚动异常。
- 显式设置
grid-auto-rows: auto或grid-auto-rows: minmax(0, max-content)，防止隐式行无限制膨胀 - 若用
grid-auto-flow: row dense，小屏慎用——dense会打乱 DOM 顺序，影响读屏器和键盘导航 - 检查是否有子项设置了
min-height或height固定值，这些会干扰隐式轨道计算
min-width: 0 和 box-sizing: border-box 这两个底层开关——它们不显眼，但缺一不可。一旦漏掉，其他所有调整都像在修漏水的桶。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
