我们在做布局的时候经常会发现有些地方的宽高排列都非常规则，而且有多行内容，这时使用网格（grid）布局就非常的方便快捷了。那么接下来我们做个简单的九宫格来看看该如何使用该布局：
实例
很明显九宫格就是九个小方块，那么我们可以用一个大盒子去套九个小盒子：
<div id="main">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
</div>
因为div是块元素，会独占一行，所以要想让他们显示在网格中，首先将需要做成网格的盒子转换成块级网络元素：display: grid;，然后给它分成三行三列：
#main{
width: 180px;
height: 180px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";
}
这里grid-template-columns表示网格的列数，grid-template-rows表示网格的行数，fr 在这里是个比例单位，表示各列（行）之间宽度（高度）的比为1：1：1，数值之间用空格隔开。如果行数或者列数较多，我们可以简写，在这里我们这样写与上面同属性等价：
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
用repeat(x,y)时，其中x表示行数（列数），y表示比例.
grid-template-areas用来划分区域，给各个网格编号以便将子元素放入规定的网格中
注意：区域必须是矩形。
让我们来看看效果：
当然，上面的行、列和区域也有总体的简写属性grid-template，就比如上面的案例，可以写成：
grid-template:
"a1 a2 a3" 1fr
"a4 a5 a6" 1fr
"a7 a8 a9" 1fr
/1fr 1fr 1fr；
但是因为这种比较麻烦，反而不如分开写来的简洁明了，所以不详细介绍。
默认情况下，子元素会按顺序分布在网格中，我们给子元素加个背景色：
/* 逆战班 */
.box1{
background-color: red;
}
.box2{
background-color: orange;
}
.box3{
background-color: yellow;
}
.box4{
background-color: green;
}
.box5{
background-color: cyan;
}
.box6{
background-color: blue;
}
.box7{
background-color: purple;
}
.box8{
background-color: hotpink;
}
.box9{
background-color: black;
}
然后看看效果：
可以看到子元素从左到右依次排到了各个格子中，但是如果我们不想让子元素按顺序分布的时候，此时可以给子元素使用grid-area属性，grid-area属性表示给子元素设置指定区域：
/* 逆战班 */
.box1{
grid-area: a9;
background-color: red;
}
.box2{
grid-area: a8;
background-color: orange;
}
.box3{
grid-area: a7;
background-color: yellow;
}
.box4{
grid-area: a6;
background-color: green;
}
.box5{
grid-area: a5;
background-color: cyan;
}
.box6{
grid-area: a4;
background-color: blue;
}
.box7{
grid-area: a3;
background-color: purple;
}
.box8{
grid-area: a2;
background-color: hotpink;
}
.box9{
grid-area: a1;
background-color: black;
}
我们再看一下效果：
很明显，子元素按照我们的意思倒着排列了。
如果我们想给每列格子之间加点空隙，可以给父元素使用grid-column-gap属性，比如给案例加10像素的列间隙：
#main{
grid-column-gap: 10px;
}
效果：
同理，如果想给每行格子之间加空隙，仍然是给父元素使用grid-row-gap属性：
#main{
grid-column-gap: 10px;
grid-row-gap: 10px;
}
效果：
当然，这里也有复合写法grid-gap，语法：
grid-gap: grid-row-gap | grid-column-gap;
中间以空格隔开。
这里我们发现，因为产生间隙，所以每个格子的宽高都自动压缩了，这是因为我们一开始固定了父容器的宽高，所以发生了这种情况，我们可以在实际情况中决定要不要固定父容器的宽高。
