CSS新手九宫格布局技巧

本文手把手教你用 CSS Grid 的 `repeat(3, 1fr)` 快速实现简洁、自适应、无需手动设置子项尺寸的 3×3 九宫格布局，从5行核心代码起步，轻松添加间距、圆角、居中、响应式断点（小屏自动切为单列）等实用增强，并贴心提醒新手易犯的三大误区，是入门 Grid 布局不可多得的高效实践指南。

用 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 重排，但新手建议先保证数量准确）

不复杂但容易忽略，写完检查两眼就稳了。

终于介绍完啦！小伙伴们，这篇关于《CSS新手九宫格布局技巧》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！