移动端九宫格应使用 repeat(3, minmax(110px, 1fr)) + gap + 媒体查询降级，而非 auto-fit + minmax()；因小屏下 auto-fit 易退化为两列或一列，而 repeat(3, ...) 可确保三列语义稳定。
repeat(3, minmax(110px, 1fr)) + gap + 媒体查询降级最稳**。iPhone SE（375px）和多数小屏手机上，auto-fit 容易退化成两列甚至一列，不是你代码写错了，是计算逻辑本身就会挤崩。
为什么 repeat(3, 1fr) 在小屏会错位或溢出
看似简单，但实际在窄屏下容易翻车：
• 容器有 padding 或父级设了 box-sizing: content-box，总宽度超限 → 横向滚动
• 子项没设 min-height，文字撑高不一致 → 行高参差，“九宫格”变“楼梯格”
• 1fr 是等分剩余空间，但没约束最小列宽，375px ÷ 3 = 125px，再扣掉 gap（比如 8px × 2 = 16px），实际每列只剩约 109px → 浏览器判定不够放，自动回退为 2 列
• 解决办法不是加更多 fr，而是明确告诉浏览器：“每列至少 110px，不够宁可留白也不换行”
minmax(110px, 1fr) 的参数怎么选
这个值不是拍脑袋定的，得看真实设备视口和内容承载力：
• 110px 来源：主流小屏宽度为 375px（iPhone SE/13 mini）到 414px（iPhone 12/14 Pro），三列均分后预留 gap 空间，110px 是实测不换行的安全下限
• 不要用 minmax(33.33%, 1fr)：百分比在 Grid 轨道定义中不参与 fr 分配，行为不可控，尤其在有 padding 的容器里极易溢出
• 也别写 minmax(1fr, 1fr)：这等于固定单列，失去弹性，且语法无效
• 若子项含图标+文字，建议同步加 min-height: 44px 和 touch-action: manipulation，防 iOS Safari 点击延迟
必须加 gap，但别碰 margin
这是最容易被忽略却影响最大的细节：
• gap: 8px 同时控制行列间距，语义清晰、计算可靠；而用子项 margin 模拟，最后一行/列会多出一倍外边距（因为 margin 不受网格约束）
• 尤其在 iOS Safari 中，margin-bottom 会在多行布局中累计，导致最后一行底部缝隙消失，视觉上“缺一块”
• 如果只需列间隙，用 column-gap: 8px；只需行间隙，用 row-gap: 8px；两者都需就直接写 gap
• 兜底建议：容器加 width: 100% 和 box-sizing: border-box，避免 padding 撑破父容器
什么时候该切媒体查询，而不是死磕 auto-fit
auto-fit 在子项数量少于 9 个时表现尚可，但一旦要保“三列语义”，它就不可靠：
• 在 375px 宽度下，repeat(auto-fit, minmax(120px, 1fr)) 计算需求为 3 × 120px + 2 × gap ≥ 376px > 可用宽度 → 必然退为 2 列
• 正确做法是主动收口：@media (max-width: 414px) { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
• 若需兼容旧 iOS（如 iOS 10.3 以下），可用 @supports not (display: grid) 降级为 flex wrap + calc()
• 真正难的不是写对那几行 CSS，而是想清楚：你到底要“最多填满”还是“严格三列”——前者用 auto-fill，后者就老实用 repeat(3, ...)
立即学习“前端免费学习笔记（深入）”；
