最直接实现标准3×3九宫格需三行CSS：display: grid；grid-template-columns: repeat(3, 1fr)；grid-template-rows: repeat(3, 1fr)。
用 grid-template-columns: repeat(3, 1fr) 创建固定三列结构
想快速得到标准 3×3 九宫格，最直接的方式就是让容器明确声明三列等宽、三行等高。不需要 JavaScript，也不依赖子元素数量是否凑够 9 个。
关键就三行 CSS：
display: grid-
grid-template-columns: repeat(3, 1fr)（比写死1fr 1fr 1fr更易维护） -
grid-template-rows: repeat(3, 1fr)（显式定义行高，避免auto导致高度不一致）
这样浏览器会按源顺序自动把子元素填进 9 个格子：从左到右、从上到下。漏掉几个？空白位置自然保留——这是 Grid 的预期行为，不是 bug。
间隙必须用 gap，别碰 margin
给格子之间加空隙，唯一推荐方式是容器上设 gap: 8px。它同时作用于行与列，语义清晰、计算可靠。
立即学习“前端免费学习笔记（深入）”；
常见错误是让每个子项自己加 margin，这会导致：
- 外边距塌陷（尤其垂直方向），实际间距不可控
- 子项宽度/高度参与布局计算，容易撑破容器或换行错位
- 最后一行/列多出一倍外边距，视觉不对称
gap 是网格容器的原生属性，只管轨道之间的空隙，完全不干扰子项自身尺寸。现代浏览器（Chrome 66+、Firefox 61+、Safari 16.4+）全部支持，IE 已可忽略。
让每个格子保持正方形：优先用 aspect-ratio
九宫格常用于图标、头像、卡片缩略图，需要视觉统一。仅靠 1fr 控制不了高度比例。
最简洁的做法是给每个子项加：
-
aspect-ratio: 1（现代标准，iOS 16.4+ / Android Chrome 104+ 已覆盖主流设备） -
width: 100%（确保占满所在网格单元） -
height: 100%或留空（由aspect-ratio主导）
旧版兼容方案（如需支持 iOS 15.6 及更早）可用 padding-bottom: 100% + position: relative + 绝对定位内容，但代码更重、易出错。除非项目明确要求兼容老系统，否则没必要降级。
响应式场景下慎用 repeat(3, 1fr)，改用 auto-fill + minmax()
如果目标是“在不同屏幕下尽可能填满且每格有合理最小宽度”，而不是“死守三列”，那 repeat(3, 1fr) 就不合适了。
小屏（如 iPhone SE 的 375px 宽度）下，375px ÷ 3 − gap × 2 ≈ 110px，可能连文字都显示不全；大屏则大量留白。此时应换为：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)))- 搭配
gap: 12px和容器padding: 12px实现视觉居中 - 用
auto-fill（不是auto-fit）保留下空轨道，维持网格线完整性
真正难的不是写这几行 CSS，而是理解 minmax(280px, 1fr) 中的 280px 不是拍脑袋定的——它得结合你图片/内容的实际最小可读宽度、gap 值、设备视口来反推。选错这个值，整个响应式逻辑就崩了。
