↵
前面我们我们说了弹性布局的相关知识点，我们都知道了弹性布局的优点是一维布局。我们可以来想一下，既然有一维的啦，那么必定也有多维布局啦！正好我们今天说的网格布军，其优点就是多维的。
display：grid；的基本用法
作用在父容器上面的语法
- display：grid；声明我们的这个容器将要用网格布局
- grid-template-columns : 设置列数
- grid-template-rows : 设置行数
- grid-template-areas : 划分区域的，区域必须是矩形，不是矩形的网格区块将无效
- 复合写法：grid-template: 列数、行数哦、划分区域的复合写法
- 注：网格的单位是 fr ( 比例单位 )；
请看下面的代码和效果图：
我们现在看到的三张图依次是css代码、html代码和效果图。
从第一张图中我们可以看到有一部分是注释起来的，上面我们讲到，grid-template是 列数、行数哦、划分区域的复合写法；也就是说，我们注释起来的那一部分是完全可以替代 grid-template-columns 、grid-template-rows 和grid-template-areas 的属性值，效果是一样的。大家可以私下里试一试，有一句老话说的好：熟能生巧。哈哈
想必大家也发现啦！我们的这个网格每一个的大小都是一样的，那么就有人会有疑问啦！那还有大侠不一样的呢！例如网上的一些网站，这里我们引用一下 Bernd Kammerer 网站，有兴趣的伙伴可以去看一下，图片如下：
在这里我们明显图片的大小不一样，图片的大小不一样也就意味着我们的网格大小也不尽相同。那么要怎么达到这样效果呢？
接下来我为大家揭秘,请看代码：
<style>
#main{
width: 300px;
height: 300px;
margin: 40px auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"a1 a2 a3"
"a1 a5 a6"
"a7 a8 a8";
align-items: center;
text-align: center;
#main div{height: 100%;}
#main .b1{grid-area: a1;background-color: blue;}
#main .b2{grid-area: a2;background-color: red;}
#main .b3{grid-area: a3;background-color: yellow;}
#main .b4{grid-area: a5;background-color: teal;}
#main .b5{grid-area: a6;background-color: tomato;}
#main .b6{grid-area: a7;background-color: hotpink;}
#main .b7{grid-area: a8;background-color: lightskyblue;}
}
</style>
根据上面的两张图我们能够发现什么呢？
是不是发现效果图里面有两块网格大小和其他的不一样。为什么会不一样呢？我们来看grid-template-areas代码里面的值，我们发现里面的 a 系列里面有两个 a1，两个 a8，接着看第一张图里面的代码class部分，会发现我们用了一个新的属性：grid-area；它的用处是把特定的区域指定给特定的容器（此处用词不当望见谅！）。例如把 区域 a1 指定给 class 里的 b1，以此类推。我想凭借各位聪明的大脑可以理解了吧。
好啦！接下来我们说一下列间距和行间距
7.grid-column-gap : 列的间距
8.grid-row-gap : 行的间距
9.grid-gap : 复合写法。grid-row-gap grid-column-gap
/* 给我们的main添加列间距 */
grid-column-gap: 6px;出现下面的情况，请看图：
我们可以很明显的看到列于列之间产生了间距，注意：间距只出现在两个网格中间。
/* 给我们的main添加行间距 */
grid-row-gap: 6px;
同样我们也可以很明显的看到行与行之间产生了间距，注意：间距只出现在两个网格中间。
大家看到这里之后，如果大家能够理解掌握，那么小编在这里恭喜大家，你们已经初步掌握的网格布局的使用方法啦！
接下来我们看一下大家比较熟悉的一些代码，
justify-items : 子项的水平居中方式
默认 : stretch 默认值，拉伸。表现为水平或垂直填充。
start
center
end
align-items : 子项的垂直居中方式
默认 : stretch 默认值，拉伸。表现为水平或垂直填充。
start
center
end
place-items : 复合写法
align-items justify-items
justify-content : 整体网格的水平对齐方式
默认：stretch
start
end
center
space-between
space-around
space-evenly
align-content : 整体网格的垂直对齐方式
默认：stretch
start
end
center
space-between
space-around
space-evenly
place-content : 复合写法
align-content justify-content
看到这里大家是不是感到格外的熟悉呢？不错，这些属性和我们的弹性布局里面的基本上面一模一样。再次我就不再多做解释啦！如有不懂的，可以到点击这里 弹性布局 ，去了解一下。
作用在子容器上面的语法
下面我们说一下作用在子项上面的一些常用属性值
- grid-area : 找指定的区域
1.对应网格的名字
2.写对应的线的数字：grid-area : 1 / 3 / span 2 / 4;
grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上占据的结束位置
