grid-template-columns: repeat(3, 1fr) 是实现九宫格三列等宽布局的核心写法，语义清晰、维护性强，比手写 1fr 1fr 1fr 更安全；需配合 display: grid 和 gap 控制间距，子项数量不足时留空属正常行为。
grid-template-columns: repeat(3, 1fr) 是核心，别手写 1fr 1fr 1fr
直接写 grid-template-columns: repeat(3, 1fr) 比手动写 1fr 1fr 1fr 更安全——前者语义清晰、可读性强，且未来要改成 4 列时只需改数字，不用动结构。如果用固定像素或百分比（比如 33.33%），会因舍入误差导致最后一列换行或间隙不均。
常见错误是漏掉 repeat() 直接写 grid-template-columns: 1fr 1fr 1fr，看似一样，但维护性差；更糟的是混用单位，比如 1fr 200px 1fr，结果第三列宽度失控，九宫格直接变形。
- 必须配合
display: grid才生效，只设列不设 display 是无效的 - 不需要显式写
grid-template-rows：子元素数量固定为 9 时，浏览器自动按需生成 3 行；若内容动态增减，才需考虑auto-fit或auto-fill - 行高由内容撑开，不是靠
grid-template-rows: repeat(3, 1fr)强制均分——除非你真需要等高卡片，否则这句反而限制灵活性
gap 是唯一合法的行列间距控制方式，别碰 margin
gap: 8px 是容器级属性，专为网格设计，它只作用于网格线之间，不影响子元素盒模型。而给每个子项加 margin 会导致外边距塌陷、尺寸计算错乱，尤其在 flex 或 grid 中，margin 可能被忽略或引发意外换行。
旧项目兼容 IE 时要注意：gap 在 IE 完全不支持，得降级用 grid-column-gap 和 grid-row-gap（已废弃但仍有兼容价值）；不过 2026 年绝大多数项目已无需考虑 IE。
- 不要写
margin: 4px然后指望“每边留 4px，合起来 8px”，实际效果是相邻项 margin 折叠，视觉间隙不可控 -
gap值可以是单值（如gap: 12px同时控制行列），也可以是双值（gap: 12px 8px，前者行距后者列距） - 如果需要首尾不留空隙，
gap仍适用——它天生不作用于容器边缘，这点比 margin 更干净
justify-items 和 align-items 控制整体居中，别在每个 item 上重复写
九宫格里所有子项内容水平垂直居中，应该统一在容器上设置 justify-items: center（水平）和 align-items: center（垂直）。这两个是容器属性，影响所有直接子元素；如果每个 div 单独加 text-align: center + display: flex + justify-content/align-items，不仅冗余，还容易因嵌套层级导致高度不一致或基线错位。
注意：这两个属性对文本、图片、按钮都生效，但前提是子项没设置自身 align-self 或 justify-self 覆盖——除非你要个别项偏移，否则保持默认即可。
- 别用
text-align: center替代justify-items：前者只对内联内容有效，块级子项不会居中 - 别用
margin: auto：在 grid 中对齐方向不明确时，margin: auto行为不稳定，尤其在多行场景下可能只居中第一行 - 如果子项本身是 flex 容器，它的内部对齐由自身
justify-content决定，和父级justify-items无关——这是常被忽略的嵌套优先级问题
子元素数量不足 9 个时，空白位置留空是正常行为
只有 6 个子元素？那最后三格就是空的，网格结构依然保持 3×3，只是对应单元格无内容。这不是 bug，是 grid 的预期行为。有人试图用伪元素补全或 JS 动态插入空 div，纯属多余——除非业务逻辑强制要求占位（比如带背景色的卡片模板），否则留空更轻量、语义更清。
如果希望“不够 9 个时自动收缩成 2×3 或 1×6”，那就不能用固定 repeat(3, 1fr)，得切到响应式方案：用 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)))，但这已超出纯九宫格范畴，属于自适应栅格了。
- DOM 中少写几个
div，CSS 不会报错也不会重排，浏览器照常渲染网格线 - 用
:nth-child选中特定位置做样式微调（比如第 5 个加边框）时，索引按实际 DOM 顺序算，空位不占序号 - React/Vue 渲染时 key 必须唯一，但 key 不影响 grid 布局——哪怕 key 乱序，只要子元素是直接子项，grid 仍按文档流顺序填格
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
