css grid 布局 ( 入门 )

简介：

     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-start 

 grid-column-end

grid-row-start 

grid-row-end

->网格间距

在两个网格单元之间的 网格横向间距  或 网格纵向间距  可使用 grid-column-gap 和 grid-row-gap 属性来创建，或者直接使用两个合并的缩写形式 grid-gap。

嵌套网格:

一个网格元素可以也成为一个网格容器。在接下来的例子中我事先有了一个3列的网格元素，并有两个跨轨道的网格。在这个例子中，第一个网格元素含有几个子级元素。当这些元素不是网格容器的直接子级元素时，它们不会参与到网格布局中，并显示为正常的文档流。

 

grid 布局中的重叠问题

因为改变z-index 值 1将2 覆盖

反之去掉z-index的控制 2 覆盖1