最稳方案是显式写死三列百分比（如33.33% 33.33% 33.34%），因repeat(3,1fr)易受浮点误差、字体缩放、Safari子像素渲染等影响导致换行；auto-fit+minmax更适合真正响应式场景。
直接用 display: grid 是目前最稳、最省事的方案，现代浏览器全覆盖（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+，连 iOS 10.3 都支持），IE10/11 语法不兼容，强行降级代价远高于收益。
为什么不用 repeat(3, 1fr) 而要写死百分比
看似更“现代”的 repeat(3, 1fr) 在真实场景中容易翻车：
• iPhone SE（375px 宽）或系统字体放大 150% 时，列宽计算误差常导致第三列换行，变成两列
• 图片未加载完、文字换行临界点、padding/border、甚至 Safari 的 subpixel 渲染，都会让三列总宽 ≠ 100%
• 实测列宽可能是 124.33px、124.33px、126.34px，累积误差直接触发回退
• grid-template-columns: 33.33% 33.33% 33.34% 显式锁死三列，堵住浮点误差，小屏也不塌
aspect-ratio: 1/1 必须配降级，否则 iOS 16.3 以下拉伸图片
aspect-ratio: 1/1 是正方形最简写法，但它在 Safari ≤16.3（即 iOS 16.3 及更早）完全无效——图片会按原始宽高比撑开，破坏整齐感：
• 必须加降级：给子项设 position: relative + padding-bottom: 100%，再用 position: absolute 把内容压进去
• 别用 height: 120px 这类固定高，它会截断长文本、无视用户字体缩放
• 移动端慎用 vh 单位，Safari 滚动时视口高度动态变化，会导致闪跳
Grid gap 和 margin 边距处理要分清
grid-gap: 8px（别用 gap 别名，IE11 不认）是容器级间距控制，干净可靠：
• 子项不用设宽高，grid 自动均分空间
• 容器本身别设 padding，改用 margin: 0 12px 控左右安全区，再配 max-width: calc(100vw - 24px) 防窄屏溢出
• 如果用 Flex 实现，必须手动清除边距：li:nth-of-type(3n) { margin-right: 0; } 干掉每行最后一项右间距，li:nth-of-type(n+7) { margin-bottom: 0; } 干掉最后一行三项底间距
• 别用 flex: 1 或 flex-grow，它会让子项宽度受内容影响，破坏等分
立即学习“前端免费学习笔记（深入）”；
响应式不是“永远三列”，而是用 auto-fit 动态适配
如果真要响应式（比如小屏单列、中屏双列、大屏三列），就别硬锁三列：
• 正确写法：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)));
• auto-fit 会折叠空轨道，auto-fill 会保留空轨道，导致小屏右侧大片空白或横向滚动
• minmax(250px, 1fr) 中，第一个参数必须是 <length></length>（如 px、rem），禁用 em（字体缩放会干扰列数计算）
• 常见失效原因：父容器没设宽度、gap 过大（如 gap: 40px）、子项写了 width: 300px 或 flex: 0 0 250px，强行顶开网格项
关键点其实就一个：九宫格本质是 3×3 等分，不是流式栅格。你越想让它“自适应”，浏览器越容易因微小扰动放弃三列——显式写死三列百分比，反而是最抗干扰的做法。
