17370845950

用 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 或绝对定位更直观可控