你所不知的grid网格布局
什么是Grid网格布局？
Grid布局是一个二维的布局方法，纵横两个方向总是同时存在，同时它的属性也分为作用在Grid子项和Grid容器上。
作用于Grid容器上的有哪些属性呢？
上面这图就是网格布局中作用于容器上的属性。
Grid容器上常用属性有哪些？
-
grid-template-columns和grid-template-rows？
这是对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。 -
grid-template-areas和grid-template？
area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。 -
grid-column-gap和grid-row-gap？
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
CSS中 grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。 -
justify-items和align-items？
justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。
align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items 是可以让align-items和justify-items属性写在单个声明中。
justify-items和align-items的取值如图： -
justify-content和align-content？
justify-content指定了网格元素的水平分布方式。
align-content指定了网格元素的垂直分布方式。
place-content可以让align-content和justify-content属性写在一个CSS声明中。
justify-content和align-content的取值范围如图：
作用于Grid子项上的有哪些属性呢？
作用于Grid子项上的属性如图：
作用于Grid子项上的属性的含义？
作用于Grid子项上的取值含义如图：
总结
这次主要说了Grid网格布局的一些取值范围以及含义。
By–逆战班–梧杺