repeat(3, 1fr)在移动端常失效，因浏览器按子项最小内容宽（如文字换行点、图片占位宽）扣减后均分剩余空间，一旦某列超容器宽÷3即降为两列；最稳写法是33.33% 33.33% 33.34%堵浮点误差。
直接用 display: grid，别碰 table 或 float，否则在 iPhone SE、Android 小屏或系统字体放大 150% 时大概率塌成两列或点击失灵。
为什么 repeat(3, 1fr) 在移动端常失效
浏览器算 1fr 时会先看子项最小内容宽度（比如按钮文字换行点、图片未加载完的占位宽、padding 和边框），再均分容器。一旦某格实际占宽 > 容器宽 ÷ 3，它就自动降为两列——这不是 bug，是渲染引擎的合理回退。
-
grid-gap: 8px+repeat(3, 1fr)在 375px 屏上实测列宽常为124.33px、124.33px、126.34px，累积误差直接触发换行 - 用户开启「更大字体」或 iOS 的 subpixel 渲染会让三列总宽 ≠ 100%
- 图片加了
object-fit: cover或文字过长，也会撑开单元格
最稳的列定义写法：grid-template-columns: 33.33% 33.33% 33.34%
显式百分比能堵住浮点误差和缩放抖动，比均分更可控。配合 grid-gap 和语义化 button 元素，就能扛住真实设备的各种干扰。
- 必须写
33.33% 33.33% 33.34%，不能全写33.33%，否则 CSS 解析后可能不足 100% -
grid-gap用数值（如8px），别用gap别名，IE11 不认 - 每个功能入口用
<button></button>，不是<div>，确保焦点顺序、键盘导航、读屏器朗读都正常 <li>禁用默认样式：<code>button { border: none; background: none; }，否则 iOS 会加灰色底纹 - 现代方案：给子项加
aspect-ratio: 1 / 1，简洁可靠 - 兼容 Safari ≤16.3（即 iOS 16.3 及更早）：父容器
position: relative，子项用padding-bottom: 100%+position: absolute填满 - 移动端热区必须 ≥ 44×44px：
min-width: 44px; min-height: 44px;，不然 Safari 点击区域判定失败 - 图片用
img包在button内，设width: 100%; height: 100%; object-fit: contain;，避免拉伸变形
正方形格子怎么保证不拉伸、不截断
别设 height: 120px —— 它会截断长文本、无视系统字体缩放；也别依赖 vh 单位，Safari 滚动时视口高度会跳变。
立即学习“前端免费学习笔记（深入）”；
真正卡住的从来不是“怎么画出九个格子”，而是小屏下是否仍保持三列、点击是否精准响应、系统字体放大后文字是否可读、读屏器是否按功能入口而非表格来播报——这些细节一漏，就是线上翻车现场。
