最稳方案是grid-template-columns: 33.33% 33.33% 33.34%配合grid-gap: 8px、min-height: 44px、touch-action: manipulation及aspect-ratio降级，避免auto-fit和固定高导致的塌陷、跳变与误触。
直接用 display: grid 最稳，别碰 table 或 float ——广告图加载不一、缩放频繁、小屏点击难，老方案扛不住。
grid-template-columns 写死三列比 repeat(3, 1fr) 更可靠
硬写 repeat(3, 1fr) 在 iPhone SE（375px 宽）、系统字体放大 150%、或某张图带长标题未加载完时，极大概率塌成两列。这不是 bug，是浏览器按子项实际内容宽度做的合理回退。
-
grid-template-columns: 33.33% 33.33% 33.34%能堵住浮点误差累积，三列总宽严格 ≈ 100% - 搭配
grid-gap: 8px（别用gap别名，IE11 不认） - 容器本身不设
padding，改用margin: 0 12px控左右安全区，再加max-width: calc(100vw - 24px)防窄屏溢出
图片必须正方形且不拉伸，aspect-ratio 要配降级
aspect-ratio: 1/1 是最简解，但它在 Safari ≤16.3（即 iOS 16.3 及更早）完全不生效。此时图片按原始宽高比撑开，九宫格立刻变形。
- 必须加降级：给每个图的外层容器设
position: relative+padding-bottom: 100% - 再让
<img alt="HTML网页多图广告怎么排？九宫格布局制作法" >绝对定位填满：position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; - 禁用
height: 120px这类固定高——它会截断长文案、无视用户系统字体缩放
加载抖动和误触问题怎么修
广告图常异步加载，空白期高度为 0，Grid 会重排；手指点不准，则是点击区域太小或滑动被误触发。
立即学习“前端免费学习笔记（深入）”；
- 所有图容器加
min-height: 44px（iOS 最小可点击高度） - 加
touch-action: manipulation，禁用滑动延迟，提升点击响应 - 图片标签必须设
max-width: 100%和height: auto，否则加载瞬间撑破格子 - 别用
auto-fit类方案（如repeat(auto-fit, minmax(110px, 1fr)))），DOM 高度为 0 时 Grid 会错判尺寸
真正难的不是排成三列，而是让每张图在任意设备、任意缩放、任意加载状态下都保持格子不跳、不塌、不拉伸、点得准——这些细节全藏在百分比写法、降级逻辑和 touch-action 的组合里。
