用 display: grid 实现九宫格更高效稳定，核心是 grid-template-columns: repeat(3, 1fr) 定义三等分列，配合 gap 控制间距、aspect-ratio 保持正方形、justify-items/align-items 统一居中，避免 flex 的 margin 计算与换行问题。
直接用 display: grid 搭九宫格，比 Flex 快且稳——不用算 margin、不纠结换行断点、不处理高度塌陷。Grid 的声明式语法让“3×3 等分”这件事变成一行配置。
grid-template-columns: repeat(3, 1fr) 是核心写法
这句代码定义了三列等宽的弹性轨道，1fr 表示均分剩余空间，不依赖固定像素或百分比计算。它天然响应容器宽度变化，也避免了 Flex 中 flex-basis 和 margin 叠加导致的宽度误差。
-
repeat(3, 1fr)等价于1fr 1fr 1fr，但更简洁、可维护性更强 - 若需留白边，直接在容器上设
padding，Grid 子项会自动避开，无需调整子项width - 不要混用
fr和px（如1fr 100px 1fr），除非明确需要固定列；否则破坏等分逻辑
gap 比 margin 更可靠地控制格子间距
用 gap: 8px 同时设置行列间隙，浏览器原生支持对齐，不会触发重排或影响 justify-content 行为。而 Flex 中靠 margin 实现间隙，容易因最后一行/列的 margin-right 或 margin-bottom 多出空白，还得用 :nth-child 清除。
-
gap在 Grid 中是布局属性，作用于网格线之间，不影响子项盒模型 - IE 不支持
gap，若需兼容，改用grid-column-gap和grid-row-gap（旧语法） - 别在子项上设
margin来模拟 gap——它会撑开网格轨道，导致列宽不均
让每个格子保持正方形：优先用 aspect-ratio
九宫格常用于图标墙、头像列表等场景，要求视觉统一。现代方案是给子项设 aspect-ratio: 1，配合 width: 100%，浏览器自动维持 1:1 比例，无需 hack 式的 padding-bottom 百分比技巧。
-
aspect-ratio: 1在 Chrome 88+、Firefox 89+、Safari 15.4+ 均已稳定支持 - 若需兼容 Safari 15.3 及更早版本，可回退到
height: 0; padding-bottom: 33.33%+position: relative+ 绝对定位内容 - 切忌只设
width: 100%; height: 100%——Grid 轨道高度由grid-template-rows控制，子项height: 100%可能失效
内容居中只需两行容器级样式
不需要给每个子项写 display: flex; justify-content: center; align-items: center。Grid 容器本身就能统一批量控制子项对齐：
-
justify-items: center→ 所有子项水平居中（相对于各自网格区域） -
align-items: center→ 所有子项垂直居中 - 如果某一个子项需要特殊对齐（比如左对齐文字+右对齐图标），再单独用
justify-self或align-self
真正容易被忽略的是：Grid 的 grid-auto-flow 默认为 row，按源顺序从左到右、从上到下填满。如果你打乱 HTML 顺序或动态插入节点，又没显式指定 grid-row/grid-column，位置可能和预期不符——这时候得检查 DOM 顺序，而不是怀疑 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
