用 display: grid + repeat(3, 1fr) 实现九宫格，需配对声明 grid-template-columns 和 grid-template-rows 并加 aspect-ratio: 1、gap 替代 margin、touchstart 替代 click、按钮语义化及尺寸合规。
直接用 display: grid + repeat(3, 1fr) 就能搞定，不需要 flex、绝对定位或 table——后者在真机上容易错位、难调试，且无法响应式缩放。
grid-template-columns 和 grid-template-rows 必须配对写
只写 grid-template-columns: repeat(3, 1fr) 不够，移动端横竖屏切换时行高可能塌陷。必须显式声明行数：
-
grid-template-columns: repeat(3, 1fr)控制三列等宽 -
grid-template-rows: repeat(3, 1fr)控制三行等高（不是auto，否则内容撑开后格子大小不一） - 加
aspect-ratio: 1到每个子项，比padding-bottom: 33.33%更简洁可靠 - 别用
height: 100vh做容器高度，iOS Safari 会把地址栏高度算进去，导致最后一行被截
gap 比 margin 更安全，但要注意 Safari 旧版本兼容性
gap 是网格专属属性，不会影响子元素的盒模型计算；而给每个 .cell 加 margin 容易让总宽度超限，尤其在 width: 100vw 下触发横向滚动条。
- 推荐写法：
gap: 12px（同时作用于行列） - Safari 14.1 及更早版本不支持
gap，需降级为row-gap和column-gap单独写 - 如果项目要兼容 iOS 13，建议加前缀：
grid-row-gap: 12px; grid-column-gap: 12px;
移动端点击失效？检查是否用了 click 事件绑定
PC 上点一次就触发，手机上要点两下甚至无反应，大概率是事件监听写成了 click。iOS Safari 对 click 有 300ms 延迟，且部分 CSS 属性（如 transform 或 opacity）会拦截默认行为。
- 改用
touchstart并立即preventDefault()，再手动触发逻辑 - 抽奖按钮必须是
或带role="button"的，否则 VoiceOver 等读屏器无法识别- 热区至少保证 44×44px，iOS 人机接口指南强制要求
- 别在父容器上绑事件然后靠
event.target判断点击位置——真机上 touch 坐标精度低，容易误判真正麻烦的从来不是布局，而是让九宫格在 iPhone SE 和 iPad Pro 上都保持正方形、点击精准、动画不卡顿——这些细节全藏在
aspect-ratio兼容性、touchstart的时机、以及gap的 fallback 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
