CSS中gap并不是新的属性，在CSS3新特性中多列布局为其添加了一个新能力。间隙属性除了运用在CSS栅格之外，CSS3新特性中弹性布局同样可以使用。
简介
Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，也是唯一的二维布局方案，利用grid布局可以很轻松的实现很多的网页布局
gird布局很强大，采用网格布局的区域，称为"容器"（container）。容器内部子元素，称为"项目"（item），即container -> item
注意：Grid 布局只对项目生效，项目只能是容器的一级子元素，不包含项目的子元素
grid相关属性
下面从容器属性和项目属性两大块来记录grid布局中的相关属性
显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas。
隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。
间距属性： grid-column-gap 和 grid-row-gap。
使用网格布局后，项目的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
间隙属性
gap：定义栅格布局的行与列间隙的尺寸。
row-gap：定义行间隙的尺寸。
column-gap：定义列间隙的尺寸。
grid-gap：定义栅格布局中行与列间隙的尺寸。
grid-row-gap：定义栅格布局中行间隙的尺寸。
grid-column-gap：定义栅格布局中列间隙的尺寸。
grid属性：
grid-template-rows/columns：规定列和行的尺寸。
grid-template-areas：规定使用特定命名的栅格布局。
grid-auto-rows/columns：规定列和行的自动尺寸。
grid-auto-flow：指定在栅格布局中元素怎样自动布局排列。
注意：CSS栅格布局起初是用grid-gap属性来定义的，目前逐渐被gap替代。
Grid 布局的使用方法
块级容器（宽度撑满整行）时,容器独占一行
display: grid;
下图是display: grid的效果：
行内容器（宽度随内容自适应）时
display: inline-grid;
下图是display: inline-grid的效果：
注意：设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
划分列 grid-template-columns
单位包括：
绝对值px，
百分比值%，
比例值fr，
绝对值 px：在容器内划分出3列，每列宽度为100px
grid-template-columns: 100px 100px 100px;
**百分比值 %：**将容器等分为3列，每列宽度为容器总宽度/3
grid-template-columns: 33.33% 33.33% 33.33%;
**比例值 fr：**将容器划分为2列，第1列的宽度 ：第2列的宽度 = 1:2
grid-template-columns: 1fr 2fr;
fr 是fraction 的缩写，意为"片段"，可以与绝对长度的单位结合使用
grid-template-columns: 150px 1fr 2fr;
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
上面代码指定了一个三行三列的网格，列宽和行高都是100px
栅格间隙
所有浏览器都支持栅格布局中的间隙。 我们来创建一个包含三列两行的栅格：
.container {
display: grid;
grid-template-columns: 200px 100px 300px;
grid-template-rows: 100px 100px;
gap: 20px;
}
打开调试器可以看到的线条为栅格线，它们分隔栅格的轨道（行和列）栅格线开始像获得厚度一样20px
网络布局实例代码及效果图
网格轨道
grid-template-columns属性：定义每一列的列宽
grid-template-rows属性：定义每一行的行高
九宫格：实现列宽和行高都是200px的网格，即200宽高的九宫格
.container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows<