简介：
Grid是一个强大的规范，当与CSS的其他部分（如flexbox）结合使用时，可以帮助您创建以前不可能在CSS中构建的布局（二维布局）。这一切都是通过在网格容器上创建一个网格来开始的。网格元素的子集 默认会有16px的padding值
使用 ：
父容器设置 display：grid 即成为网格容器。
grid-template-columns 定义网格中的列轨道的大小
网格还引入了一个另外的长度单位 fr 来帮助我们创建灵活的网格轨道。新的fr单位代表网格容器中可用空间的一等份。
这些轨道会随着可用空间增长和收缩。
-> 在轨道清单中使用repeat()
在上面的例子中 我们很快就会发现一个问题 如果我们的列数过多的情况下 假如说是10列 那我们可能就得写 10个列轨道宽度值来定义网格 这样就显得很蹩脚 repeat 就是用来解决这个问题的
Repeat 语句可以用于重复轨道列表中的一部分。
repeat 语句的用法1
该值会把整个网格容器 分为 5份 开始 和末位值 为固定px 单位 宽度的列轨道 中间 为3个fr单位为1的列轨道
repeat 语句的用法2
该值会重复 3份 1fr 2fr 的 列轨道配置 总共为6列 即11:22==33:44==55:66==77:88==1:2
grid-auto-rows ：200px 属性 在隐式网格中创建的轨道是200像素高。（自定义网格高度）
使用grid-auro-rows 适应minmax() 实现最小行高
使用行线 列线 摆放网格
->网格间距
在两个网格单元之间的 网格横向间距 或 网格纵向间距 可使用 grid-column-gap 和 grid-row-gap 属性来创建，或者直接使用两个合并的缩写形式 grid-gap。
嵌套网格:
一个网格元素可以也成为一个网格容器。在接下来的例子中我事先有了一个3列的网格元素，并有两个跨轨道的网格。在这个例子中，第一个网格元素含有几个子级元素。当这些元素不是网格容器的直接子级元素时，它们不会参与到网格布局中，并显示为正常的文档流。
grid 布局中的重叠问题
因为改变z-index 值 1将2 覆盖
反之去掉z-index的控制 2 覆盖1
