最省事可控的九宫格方案是 display: grid，现代浏览器全覆盖，IE10/11语法不兼容不建议降级；用 grid-template-columns: 33.33% 33.33% 33.34% 避免浮点误差，配合 grid-gap: 8px 和 aspect-ratio: 1/1 保证正方形；Flex 实现需清除 nth-of-type(3n) 和 (n+7) 的多余边距；float+padding-bottom 方案兼容 IE8+但依赖父宽；table 布局语义不符、响应差、无障碍弱，仅数独等真表格场景适用。
直接用 display: grid 是最省事、最可控的方案，现代浏览器全覆盖（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+），连 iOS 10.3 都支持。老版本 IE（IE10/11）虽支持部分 Grid，但语法不兼容，强行降级会引入大量 hack，不值得。
用 grid-template-columns 定死三列最稳
别被“自适应”带偏——九宫格本质是 3×3 等分，不是流式栅格。硬写 repeat(3, 1fr) 在某些缩放或字体设置下会因子项内容撑开导致列宽微差；显式写百分比反而更准：
-
grid-template-columns: 33.33% 33.33% 33.34%能堵住 CSS 浮点累积误差 - 配合
grid-gap: 8px（不用gap别名，IE11 不认） - 子项不用设宽高，
grid自动均分容器空间
示例：
.grid-9 {
display: grid;
grid-template-columns: 33.33% 33.33% 33.34%;
grid-gap: 8px;
}
.grid-9 > * {
aspect-ratio: 1 / 1; /* 现代写法，保证正方形 */
}
flex-wrap 布局要手动砍掉末尾边距
Flex 实现九宫格时，margin-right 和 margin-bottom 会把第 3、6、9 项右边和第 7–9 项底部多撑出空白，必须用伪类清除：
立即学习“前端免费学习笔记（深入）”；
-
li:nth-of-type(3n) { margin-right: 0; }—— 干掉每行最后一项的右间距 -
li:nth-of-type(n+7) { margin-bottom: 0; }—— 干掉最后一行三项的底间距 - 别用
flex: 1或flex-grow，它会让子项宽度受内容影响，破坏等分 - 高度对齐靠
align-items: stretch（默认值），别乱设height
float + padding-bottom 实现正方形格子
这个方案专治“内容高度不固定但又要视觉正方形”的场景，比如图标+文字组合。核心是利用 padding-bottom 百分比基于父宽计算的特性：
- 父容器设
position: relative，子项设position: absolute撑满 - 子项本身不设
height，用padding-bottom: 33.33%触发高度 = 宽度 × 33.33%，再通过绝对定位把内容压进去 - 外层包裹盒必须有明确宽度（比如
width: 100%或具体像素），否则padding-bottom无效 - IE8+ 兼容，但响应式缩放时 padding 计算仍依赖父宽，需搭配
max-width控制上限
别碰 table 布局做九宫格
虽然语义上像，但实际踩坑极多：
-
table-layout: fixed才能控列宽，但一旦子内容超长就会溢出或换行，破坏网格整齐性 - 移动端
td默认不响应viewport缩放，容易出现横向滚动条 - 无法用 CSS 动画控制单个格子入场/高亮，DOM 层级太深
- 无障碍支持差，屏幕阅读器读表结构时逻辑混乱
真正需要表格语义（比如数独题面）才用 table，普通功能入口或图片墙一律绕开。
