用 grid-template-columns: repeat(3, 1fr) 可快速实现三行三列等宽九宫格；需配合 grid-auto-rows: 1fr 或 aspect-ratio: 1 实现等高或正方形格子，再通过 gap 设置间距、媒体查询适配小屏。
用 grid-template-columns: repeat(3, 1fr) 就能快速实现标准九宫格布局——三行三列、等宽等高、自动填充内容。
基础九宫格结构
只需设置容器为 grid，并定义三列等分，Grid 会自动按内容顺序逐行填满：
- 给父容器加
display: grid - 用
grid-template-columns: repeat(3, 1fr)创建三列弹性列 - 默认
grid-auto-rows: auto，建议显式设为1fr或固定值（如100px）保证行高一致
让每格变成正方形（常用需求）
九宫格常要求“方格”，仅靠 1fr 不控制高度。推荐用 aspect-ratio: 1：
- 给子项（每个格子）设置
aspect-ratio: 1，浏览器自动保持宽高相等 - 配合
width: 100%和height: 100%（或grid-area占满）效果更稳 - 旧版浏览器不支持
aspect-ratio？可用padding-top: 100%+position: relative/absolute模拟
响应式九宫格（适配小屏）
手机上三列太挤，用媒体查询动态调整列数：
@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }@media (max-width: 480px) { grid-template-columns: 1fr; }- 也可用
repeat(auto-fit, minmax(200px, 1fr)))替代固定 3 列，更灵活
对齐与间距别忽略
格子之间留白、整体居中，影响观感：
- 用
gap: 12px统一行列间距（替代老式 margin 负技巧） - 容器加
justify-items: center让所有子项水平居中（若子项宽度不足） - 若内容不填满整格，加
align-items: stretch（默认）确保等高
基本上就这些 —— 三列靠 repeat(3, 1fr)，方格靠 aspect-ratio，响应靠媒体查询或 auto-fit，间隙靠 gap。不复杂但容易忽略细节。
