【CSS】九宫格布局
CSS Grid布局（推荐）
实现代码：
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.container {display: grid;/* grid-template-columns 设置列宽repeat(3, 1fr) 表示三列等宽 1fr 表示一列的宽度*/grid-template-columns: repeat(3, 1fr);gap: 10px; /* 行列间距统一 */.item {background-color: #f0f0f0;padding: 10px;border-radius: 5px;}}</style></head><body><div class="container"><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></body>
</html>
Flexbox布局（兼容性优先）
实现代码：
.container {display: flex;flex-wrap: wrap;}.item {flex: 0 0 calc(33.33% - 20px);margin: 10px;background-color: #f0f0f0;}
Float浮动布局（传统方案）
需手动计算容器宽度并清除浮动，适用于老旧浏览器环境。
实现代码：
.container {width: 306px; / (100px3) + (边距6px2) /overflow: hidden; / 清除浮动 /
.item {float: left;width: 94px; / 100px - 边距3px2 */margin: 3px;
}
Inline-block布局（特殊场景）
需处理元素间的默认空白间隙，适合需要行内特性的复杂组合。
实现代码：
.container {font-size: 0; / 消除字符间隙 /letter-spacing: -5px;
.item {display: inline-block;width: 33.33%;font-size: 16px; / 重置字体 /
}