CSS Grid布局是CSS3推出的二维布局方案，能够同时处理行和列的分布，非常适合实现九宫格这类规整的网格结构。相比传统的浮动布局或者弹性盒布局，使用Grid布局实现九宫格不需要额外的嵌套容器，也不需要复杂的尺寸计算，代码更简洁，维护成本更低。
核心知识点说明
repeat函数
repeat是Grid布局中用于简化重复网格定义的语法，它的第一个参数是重复的次数，第二个参数是重复的尺寸值。比如repeat(3, 1fr)就表示重复3次1fr的尺寸，等价于1fr 1fr 1fr，可以大幅减少重复代码的编写。
fr单位
fr是Grid布局特有的分数单位，代表网格容器中可用空间的分配比例。比如设置3列都是1fr，那么每一列会平分容器的可用宽度，不管容器尺寸怎么变化，三列的宽度始终保持一致。
九宫格实现步骤
实现九宫格的核心思路是：先定义一个容器作为Grid容器，设置3行3列的网格结构，每一行和每一列都使用1fr单位平分空间，再往容器里添加9个子元素即可。
第一步：定义Grid容器
给外层容器设置display: grid开启Grid布局，然后使用grid-template-columns和grid-template-rows分别定义列和行的结构，这里都用repeat(3, 1fr)即可实现3行3列均分。
第二步：添加子元素
往容器中添加9个子元素，Grid会自动按照定义的网格结构排列这些元素，不需要额外设置浮动或者定位属性。
完整代码示例
以下是完整的实现代码，包含样式和HTML结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid九宫格示例</title>
<style>
/* 九宫格容器样式 */
.grid-container {
display: grid;
/* 定义3列，每列占1份可用空间 */
grid-template-columns: repeat(3, 1fr);
/* 定义3行，每行占1份可用空间 */
grid-template-rows: repeat(3, 1fr);
/* 设置网格间隙，可选 */
gap: 10px;
/* 容器宽度和高度，可根据需求调整 */
width: 300px;
height: 300px;
margin: 20px auto;
background-color: #f0f0f0;
padding: 10px;
}
/* 九宫格子元素样式 */
.grid-item {
background-color: #4a90e2;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>
</html>
常见问题解答
- 可以让九宫格的列宽不固定吗？ 可以，fr单位本身就是按比例分配可用空间，容器宽度变化时，每个网格的宽度会自动调整，不需要设置固定像素值。
- 如何调整九宫格之间的间隙？ 使用
gap属性即可，比如gap: 15px表示网格之间的行和列间隙都是15px，也可以分别设置row-gap和column-gap。 - 子元素数量不足9个会怎么样？ 如果子元素数量少于9个，剩下的网格位置会空出来，不会自动补全，需要补全的话可以额外添加空的子元素。
注意：CSS Grid布局在IE浏览器上兼容性较差，如果需要兼容IE项目，不建议使用这种方式实现九宫格，可选择弹性盒布局替代。