用 repeat(3, 1fr) 一行定义三行三列等分九宫格，gap 统一控制间距，place-items: center 一键居中内容，grid-column/row 精准定位元素。
用 repeat() 和 fr 单行就能写出标准九宫格，根本不用手动写 9 个 grid-template-rows/columns。
直接用 repeat(3, 1fr) 定义三等分行列
九宫格本质是 3×3 等分网格，CSS Grid 天然支持重复模式：
-
grid-template-columns: repeat(3, 1fr);—— 三列均分容器宽度 -
grid-template-rows: repeat(3, 1fr);—— 三行均分容器高度 - 合起来就是「正方形九宫格」，响应式友好，缩放自动适应
加 gap 一键控制格子间距
不用给每个项目单独设 margin，统一用 gap：
-
gap: 12px;同时作用于行距和列距 - 也可分开写：
row-gap: 8px; column-gap: 16px; - gap 会自动避开容器边缘，比 margin 更干净
内容居中？用 place-items 一行搞定
让每个格子内的文字、图标自动居中，无需额外类名或 flex：
-
place-items: center;—— 同时设置justify-items和align-items - 若只要水平居中：
justify-items: center; - 若子元素是块级且需内部居中，可再加
display: grid;+place-content: center;
想突出中间格子？用 grid-column/grid-row 定位
默认所有子元素按顺序填入 1–9 号网格区域，但可以手动指定位置：
- 让第 5 个元素（中心）跨两行两列：
grid-column: 2 / 4; grid-row: 2 / 4; - 让标题独占第一行：
grid-column: 1 / -1; grid-row: 1;（-1 表示最后一根线） - 定位语义清晰，比 float 或绝对定位更直观可控
