现代项目应直接使用 display: grid；ie10/11 因语法不兼容（如不支持 repeat()、gap）且兼容成本高，建议放弃；九宫格用显式百分比列宽（如 33.33% 33.33% 33.34%）可规避浮点误差；子项设 aspect-ratio: 1 / 1 即可保持正方形。
现代项目直接用 display: grid，别绕弯子。IE10/11 虽支持部分 Grid，但语法不兼容（比如不认 repeat()、gap），强行兼容成本远高于收益。
grid-template-columns 写死三列比 repeat(3, 1fr) 更稳
九宫格本质是 3×3 等分，不是流式栅格。用 repeat(3, 1fr) 在某些缩放、字体设置或子项内容撑开时，会因浮点计算累积导致列宽微差（比如三列分别是 33.332%、33.333%、33.335%）；显式写百分比反而更可控：
-
grid-template-columns: 33.33% 33.33% 33.34%能堵住 CSS 浮点误差 - 子项不用设
width或flex，Grid 自动均分容器空间 - 配合
grid-gap: 8px（注意：别用gap别名，IE11 不认）
子项保持正方形用 aspect-ratio 最省事
现代浏览器（Chrome 100+、Firefox 110+、Safari 16.4+）已普遍支持 aspect-ratio，比老式 padding-bottom + absolute 套路干净得多：
- 给子项加
aspect-ratio: 1 / 1，高度自动跟随宽度 - 无需父容器设
position: relative，也无需额外包裹层 - 若需兼容旧版 Safari（padding-bottom: 100% +
position: absolute方案
Flex 实现时必须清除末尾边距
用 flex-wrap: wrap 做九宫格，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: 1，它会让子项宽度受内容影响，破坏等分 - 高度对齐靠默认的
align-items: stretch，别乱设height
真正容易被忽略的是：九宫格不是“响应式栅格”，它的列数固定为 3，所有方案都应围绕这个前提做取舍——Grid 的显式列定义、Flex 的 nth-of-type 清除、甚至 float 的负 margin，本质都是在对抗 CSS 默认布局行为的副作用。别被“自适应”带偏方向。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
