【CSS篇】实现九宫格布局的五种方式详解

LuckySusu
356 阅读4分钟

九宫格布局是网页开发中常见的网格结构，常用于展示图标、卡片、商品列表等内容。本文将通过 Flex 布局、Grid 布局、Float 浮动、Inline-block 内联块 和 Table 表格 五种方式实现一个完整的九宫格布局，并提供详细的 HTML + CSS 示例代码。

🧩 布局目标

我们要实现如下效果：

[1] [2] [3]
[4] [5] [6]
[7] [8] [9]
  • 每个格子大小相同；
  • 三个一行排列；
  • 格子之间有间距；
  • 所有格子均匀分布于容器中；

✅ 方法一：使用 Flex 布局（推荐）

🔧 HTML 结构

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

🎨 CSS 样式

/* 公共样式 */
ul {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
  text-align: center;
  background: skyblue;
  border-radius: 5px;
}

/* Flex 布局样式 */
ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

li {
  width: 30%;
  height: 30%;
  margin-right: 5%;
  margin-bottom: 5%;
}

li:nth-of-type(3n) {
  margin-right: 0; /* 消除每行最后一个元素的右边距 */
}

li:nth-of-type(n+7) {
  margin-bottom: 0; /* 消除最后一行元素的下边距 */
}

📌 优点

  • 简洁直观；
  • 支持响应式；
  • 易于扩展为其他行列数布局；

✅ 方法二：使用 Grid 布局（最简洁）

🎨 CSS 样式

ul {
  display: grid;
  grid-template-columns: repeat(3, 30%); /* 定义三列 */
  grid-template-rows: repeat(3, 30%);     /* 定义三行 */
  grid-gap: 5%;                            /* 设置间距 */
  width: 100%;
}

li {
  text-align: center;
  background: skyblue;
  border-radius: 5px;
}

📌 优点

  • 语义清晰；
  • 高度灵活；
  • 支持自动换行和间距设置；
  • 是现代响应式布局的最佳选择之一；

✅ 方法三：使用 Float 浮动

🎨 CSS 样式

ul {
  width: 100%;
  overflow: hidden; /* 清除浮动影响 */
}

li {
  float: left;
  width: 30%;
  height: 30%;
  margin-right: 5%;
  margin-bottom: 5%;
}

li:nth-of-type(3n) {
  margin-right: 0;
}

li:nth-of-type(n+7) {
  margin-bottom: 0;
}

📌 注意事项

  • 必须清除浮动，否则容器高度塌陷；
  • 不如 Flex/Grid 灵活；
  • 推荐在兼容老旧浏览器时使用；

✅ 方法四：使用 Inline-block 内联块

🎨 CSS 样式

ul {
  width: 100%;
  letter-spacing: -10px; /* 消除 inline-block 的空白间隙 */
}

li {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  height: 30%;
  margin-right: 5%;
  margin-bottom: 5%;
  letter-spacing: normal;
}

li:nth-of-type(3n) {
  margin-right: 0;
}

li:nth-of-type(n+7) {
  margin-bottom: 0;
}

📌 注意事项

  • inline-block 元素之间默认有空白字符，需用 letter-spacing 或 font-size: 0 消除；
  • 可控性较好，但不如 Flex/Grid 简洁；
  • 适用于需要兼容 IE 的项目；

✅ 方法五：使用 Table 表格布局

🔧 HTML 结构

<ul class="table">
  <li>
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </li>
  <li>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </li>
  <li>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </li>
</ul>

🎨 CSS 样式

.table {
  display: table;
  width: 100%;
  border-spacing: 10px; /* 单元格之间的间距 */
}

.table li {
  display: table-row;
}

.table div {
  display: table-cell;
  width: 30%;
  height: 30%;
  text-align: center;
  background: skyblue;
  border-radius: 5px;
}

📌 优点

  • 类似表格的整齐布局；
  • 对齐非常严格；
  • 适合固定内容的布局场景；

📊 五种方法对比总结

方法是否推荐适用场景优点缺点
Flex✅ 推荐现代布局、响应式简洁、易维护需要手动处理边距
Grid✅✅ 强烈推荐现代、复杂布局最简洁、最强大老旧浏览器不支持
Float⚠️ 一般推荐兼容老项目通用性强需要清除浮动
Inline-block⚠️ 一般推荐需要兼容IE或简单布局控制粒度细白空格问题需处理
Table❌ 不推荐特殊需求、历史遗留布局严谨结构复杂，不易响应式

💡 进阶技巧与建议

  • 使用 gap 属性可以简化间距控制（仅限 Flex/Grid）；
  • 使用百分比单位可实现响应式布局；
  • 使用 calc() 动态计算宽度或高度；
  • 使用媒体查询实现不同屏幕尺寸下的适配；
  • 推荐优先使用 Flex / Grid，它们是最现代、最强大的布局工具；

📌 总结

布局方式推荐指数说明
Flex⭐⭐⭐⭐☆简洁、灵活、响应式友好
Grid⭐⭐⭐⭐⭐最强布局方式，推荐首选
Float⭐⭐☆☆☆老旧项目兼容，已逐渐淘汰
Inline-block⭐⭐⭐☆☆简单项目可用，注意空白间隙问题
Table⭐☆☆☆☆特殊用途，不推荐常规使用

📌 一句话总结：

在现代前端开发中，推荐使用 Flex 或 Grid 布局 来实现九宫格，既简洁又强大；如果需要兼容老旧浏览器，可以选择 float 或 inline-block 方案。

avatar
文章
阅读
粉丝