浅谈grid网格布局

网格布局有作用于容器上的，也有子项上的，具体如下图：

作用在grid容器上的：

1.grid-template-columns（设置列）和grid-template-rows（设置行）?
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。
注：网格中提供了一个新的单位：fr ( 比例单位 )
2.grid-template-areas？
area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
3.grid-template？
grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。
写法：
grid-template:
“a1 a1 a1” 1fr
“a3 a3 a2” 1fr
“a3 a3 a2” 1fr
1fr 1fr 1fr;
4. grid-column-gap和grid-row-gap？
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
注：CSS中 grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。
5. justify-items和align-items？
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。
justify-items和align-items的具体取值如下图：
6. justify-content和align-content？
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。
其具体取值如下图：

作用在grid子项上的：

grid子项上的具体的CSS属性如下图：

注意：以上图片均出自逆战班