相关知识点：
创建多列
column-count 属性指定了需要分割的列数
列与列之间的间隙
column-gap 属性指定了列与列间的间隙
列边框
column-rule-style 属性指定了列与列间的边框样式
column-rule-width 属性指定了两列的边框厚度
column-rule-color 属性指定了两列的边框颜色
column-rule 属性是 column-rule-*所有属性的简写
column-rule: 1px solid lightblue;
Grid 布局
属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。
display 属性
display: grid指定一个容器采用网格布局
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用Grid布局完成九宫格</title>
</head>
<style>
.container{
display: grid;
/* grid-template-columns 属性定义每一列的列宽， grid-template-rows 属性定义每一行的行高
定义一个三行三列的网格，列宽和行高都是 100px ，使用了网格布局，就无须单独控制子项的宽高 */
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.it{
border: 1px solid gold;
/* 让文字在div中垂直水平居中 */
line-height: 100px;
text-align: center;
}
.item1{
background-color: pink;
}
.item2{
background-color: blueviolet;
}
.item3{
background-color: forestgreen;
}
.item4{
background-color: brown;
}
.item5{
background-color: darkolivegreen;
}
.item6{
background-color: darkorange;
}
.item7{
background-color: fuchsia;
}
.item8{
background-color: violet;
}
.item9{
background-color: navy;
}
</style>
<body>
<div class="container">
<div class="it item1">1</div>
<div class="it item2">2</div>
<div class="it item3">3</div>
<div class="it item4">4</div>
<div class="it item5">5</div>
<div class="it item6">6</div>
<div class="it item7">7</div>
<div class="it item8">8</div>
<div class="it item9">9</div>
</div>
</body>
</html>实现效果：
