用 CSS Grid 的 repeat(3, 1fr) 可简洁实现 3×3 九宫格布局，无需设置子项宽高，配合 gap、响应式媒体查询和基础样式增强即可快速完成自适应九宫格。
用 CSS Grid 的 repeat() 函数实现九宫格，是新手练手的极佳选择——代码简洁、逻辑清晰、响应式友好。
一、九宫格的本质就是 3×3 网格
九宫格即 3 行 × 3 列的等分布局。Grid 布局中，只需定义容器为 display: grid，再用 repeat(3, 1fr) 同时设置行和列，就能让 9 个子元素自动均匀填满。
关键点：
-
1fr表示每列/行占剩余空间的 1 份，3 个1fr就是均分 -
repeat(3, 1fr)等价于1fr 1fr 1fr，更简洁不易出错 - 不需要给子项单独设宽高，Grid 自动分配空间
二、基础 HTML + CSS 实现（5 行搞定）
HTML 结构保持最简：一个容器包裹 9 个子元素（如 div）：
立即学习“前端免费学习笔记（深入）”；
<div class="grid-9"> <div>1</div><div>2</div><div>3</div> <div>4</div><div>5</div><div>6</div> <div>7</div><div>8</div><div>9</div> </div>
CSS 部分：
.grid-9 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 8px; /* 单元格间距，可选 */
}✅ 效果立现：9 个格子等宽等高，自适应容器大小。
三、加点实用增强（新手易上手）
让九宫格更可用、更美观，只需几行追加样式：
- 加边框或背景色：
div.grid-9 > div { background: #f0f0f0; border-radius: 4px; padding: 12px; text-align: center; } - 居中文字+垂直对齐：
display: flex; align-items: center; justify-content: center; - 响应式优化（小屏变单列）：
@media (max-width: 480px) { .grid-9 { grid-template-columns: 1fr; grid-template-rows: repeat(9, auto); } }
四、常见问题提醒
新手常踩的小坑：
- 忘记给容器设
display: grid—— 其他属性全无效 - 误写成
repeat(3, 1fr 1fr 1fr)—— 会生成 9 列，不是 3 列 - 子元素数量 ≠ 9 时，Grid 仍按 3×3 排列，空位留白（可配合
grid-auto-flow: dense重排，但新手建议先保证数量准确）
不复杂但容易忽略，写完检查两眼就稳了。
