九宫格不齐主因是行列未明确约束，应使用minmax(0,1fr)定义比例并设justify-items/align-items为stretch，重置margin/padding/box-sizing，用gap替代margin控制间距。
九宫格不平均，通常不是格子“长歪了”，而是列宽或行高没被明确约束——Grid 默认按内容自动分配空间，文字多、图片大、内边距不一致，都会让格子看起来参差不齐。解决核心是用 grid-template-columns 和 grid-template-rows 主动定义比例，而不是依赖 repeat(3, 1fr) 这类看似均分、实则易受内容干扰的写法。
用固定比例代替 fr 单位（更可控）
fr 是“剩余空间等分”，一旦某格内容撑开（比如一张大图或一段长文本），整行就会被它带偏。换成具体比例更稳：
-
grid-template-columns: 1fr 1fr 1fr→ 改成grid-template-columns: 33.33% 33.33% 33.34%或更推荐grid-template-columns: repeat(3, 1fr)+grid-auto-columns: 0配合minmax() - 真正推荐：用
minmax(0, 1fr)，它能强制截断溢出内容，防止单格撑大整体布局：grid-template-columns: repeat(3, minmax(0, 1fr));grid-template-rows: repeat(3, minmax(0, 1fr));
统一格子尺寸，靠 justify-items 和 align-items
即使列行比例定了，每个格子内部的内容仍可能上下左右“漂移”，造成视觉不齐。加这两行立刻对齐：
-
justify-items: stretch;（默认值，确保内容水平撑满） -
align-items: stretch;（确保内容垂直撑满） - 如果格子里是图片或按钮，再加
width: 100%; height: 100%，避免它们自带尺寸破坏整齐感
去掉干扰项：重置 margin、padding、box-sizing
初学者常忽略这些隐性影响：
立即学习“前端免费学习笔记（深入）”；
- 所有格子设
margin: 0; padding: 0;，避免内边距/外边距偷走空间 - 全局加
* { box-sizing: border-box; }，让 padding 不额外增加宽度 - 图片默认是 inline 元素，有基线间隙，加
vertical-align: top;或设为display: block;
加 gap 比用 margin 更安全
想让九宫格有间距？别给每个格子加 margin（容易导致首尾多出空白、响应错乱），改用 Grid 原生 gap：
-
gap: 8px;同时控制行列间距 -
row-gap: 10px; column-gap: 6px;可分别设置 - gap 不会影响 grid 容器总宽，也不触发 margin 折叠问题
基本上就这些。不用大改结构，加几行关键声明，九宫格就能从“看起来差不多”变成“一眼就齐”。不复杂但容易忽略。
