九宫格布局用display: grid三行实现：display: grid、grid-template-columns: repeat(3, 1fr)、gap控制间距；对齐用justify-items和align-items；响应式用auto-fit+minmax；js渲染需用唯一key。
用 display: grid 三行搞定九宫格布局
不用 float、不用 flex 嵌套，display: grid 是目前最直接的方式。核心就三句 CSS：display: grid + grid-template-columns: repeat(3, 1fr) + gap 控制间距。
常见错误是漏写 gap 或写成 margin —— 子元素加 margin 会导致外边距塌陷或尺寸计算错乱，而 gap 是网格容器的原生属性，专为行列间隙设计。
示例：
.grid-9 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
-
repeat(3, 1fr)比写死1fr 1fr 1fr更易维护，也比auto-fit+minmax()更可控（后者适合响应式但容易“挤”出非 3 列） - 如果子元素数量不足 9 个，空白位置会留空——这是正常行为，不是 bug
- IE 不支持
gap（旧版需用grid-column-gap/grid-row-gap），但现代项目基本可忽略
子元素内容居中对齐要设在容器上，不是每个 item 单独设
很多人给每个 div 加 text-align: center 和 display: flex，结果样式冗余、高度不一致。九宫格的内容对齐应由网格容器统一控制。
关键属性是：justify-items: center（水平）和 align-items: center（垂直）。这两个是容器级设置，影响所有直接子项。
- 若只希望某几个格子特殊对齐，再单独给对应子元素加
justify-self或align-self - 避免在子元素上写
margin: auto—— 在 grid 中它可能失效，尤其当容器没设align-items时 - 文字换行问题：如果子元素内文字过长，默认不折行。加
word-break: break-word或overflow-wrap: break-word更稳妥
响应式断点下保持三列？小心 minmax() 的陷阱
想在小屏变两列、超小屏变一列，别直接改 grid-template-columns 的 repeat(3, ...)。用 minmax() + auto-fit 更灵活，但参数稍不注意就会“列数飘移”。
正确写法：
.grid-9-responsive {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
}
-
minmax(200px, 1fr)表示每列最小 200px、最大均分剩余空间；auto-fit会让空列收缩消失 - 别写成
minmax(1fr, 1fr)—— 这等于固定单列宽度，失去响应意义 - 真要严格控制“小屏必须两列”，不如用媒体查询重写
grid-template-columns: repeat(2, 1fr)，更直观、更可控
JavaScript 动态渲染九宫格时，注意 DOM 插入顺序和 key 稳定性
React/Vue 里用循环生成 9 个格子，最容易踩的坑是 key 写成 index。一旦列表增删，DOM 复用错乱，动画错位、状态丢失都可能发生。
- 每个格子应有唯一业务标识（比如
item.id），而不是index - 如果数据源是数组且无 id，先用
map((item, i) => ({ ...item, _key: i }))临时补，但上线前务必替换为真实唯一字段 - 服务端返回的顺序就是渲染顺序 —— 不要依赖 JS 排序后再渲染，否则首屏可能闪动或错位
格子本身不需要额外 class 或 data 属性来“标记位置”，CSS Grid 的行列逻辑已隐含结构，JS 只管数据，样式交给 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
