如何使用CSS实现九宫格布局的几种方法

在网页开发中，九宫格布局是很常见的界面形式，例如手机里的应用图标、电商首页的分类入口等。实现这种三行三列的方块排列，CSS提供了多种思路，下面介绍几种实用方法。

一、使用浮动实现九宫格

传统方式是用float让九个块横向排列并换行。每个子项宽度设为约三分之一，配合box-sizing避免溢出。需要注意父容器要清除浮动。

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

.box {
  overflow: hidden; /* 清除浮动 */
}
.item {
  float: left;
  width: 33.333%;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

二、使用flex弹性盒子

flexbox是现代布局首选。父容器设为flex并允许换行，子项给定基础宽度即可自动排成九宫。

.box {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 0 0 33.333%;
  height: 100px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

三、使用grid网格布局

grid是最直接的方案，用grid-template-columns定义三列，子项自动填入。

.box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.item {
  height: 100px;
  border: 1px solid #ccc;
}

四、方法对比

实际项目中，如果需兼容老浏览器可用浮动或flex；新项目推荐grid，语义清晰且改起来方便。理解float、flex-wrap与grid-template-columns的用法，就能灵活应对九宫格需求。

CSS九宫格布局flexbox修改时间：2026-07-28 12:09:18