你所不知的grid网格布局

什么是Grid网格布局？

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在，同时它的属性也分为作用在Grid子项和Grid容器上。

作用于Grid容器上的有哪些属性呢？

上面这图就是网格布局中作用于容器上的属性。

Grid容器上常用属性有哪些？

1. grid-template-columns和grid-template-rows？
   这是对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。

2. grid-template-areas和grid-template？
   area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
   grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。

3. grid-column-gap和grid-row-gap？
   grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
   CSS中 grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。

4. justify-items和align-items？
   justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。
   align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
   place-items 是可以让align-items和justify-items属性写在单个声明中。
   justify-items和align-items的取值如图：
   

5. justify-content和align-content？
   justify-content指定了网格元素的水平分布方式。
   align-content指定了网格元素的垂直分布方式。
   place-content可以让align-content和justify-content属性写在一个CSS声明中。
   justify-content和align-content的取值范围如图：
   

作用于Grid子项上的有哪些属性呢？

作用于Grid子项上的属性如图：

作用于Grid子项上的属性的含义？

作用于Grid子项上的取值含义如图：

总结

这次主要说了Grid网格布局的一些取值范围以及含义。