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; / 重置字体 /
}
