用CSS Grid实现九宫格只需设置display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);，配合gap、justify-items和align-items可轻松实现等分、间隙与内容居中，子项设aspect-ratio: 1可确保正方形。
用 CSS Grid 实现九宫格非常简单，核心就是 grid-template-columns 和 grid-template-rows 配合 repeat() 与 fr 单位。
用 repeat(3, 1fr) 一次性定义三行三列
九宫格本质是 3×3 的等分网格。直接写：
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
这样就创建了 3 列等宽、3 行等高的网格容器，9 个子元素会自动按源顺序填满格子（从左到右、从上到下）。
保证每个格子是正方形（可选但常用）
如果希望九宫格每个单元是正方形（比如头像墙、图标菜单），可以结合 aspect-ratio: 1 或利用 padding-bottom 技巧，更推荐现代写法：
立即学习“前端免费学习笔记（深入）”；
- 给每个子项设置
aspect-ratio: 1，并设width: 100%，它会自动保持正方形 - 或者统一控制容器：用
grid-auto-rows: 1fr+ 子项height: 0; padding-bottom: 33.33%（需配合position: relative和绝对定位内容）
加间隙用 gap，别用 margin
想让格子之间有空隙，直接用 gap: 8px（同时作用于行和列），简洁又可靠：
-
gap: 8px等价于row-gap: 8px; column-gap: 8px - 避免对子元素设
margin，容易破坏对齐，也增加计算复杂度
内容居中对齐更顺手
让每个格子里的内容（比如图标+文字）居中显示，只需两行：
justify-items: center; /* 水平居中 */ align-items: center; /* 垂直居中 */
这两个属性作用于整个网格容器，所有子项都会自动居中，无需单独设置每个子项。
