如果grid-column-start为负值，表示的是“倒数第几条网格线”

比如，为-1的时候，表示这一列的开始网格线是倒数第一条线。

网格定义了5列，所以倒数第一条线，就是最后一条线，也就是第五列的右边的线。

现在要把第五列的右边这条线作为这个网格线的开始，那么就要多出一列，多出一列的宽度默认为auto，会尽可能大的占用空间，比如占据容器的剩余空间

span <number>的作用：

案例二： 

隐式网格轨道的出现： 

 start\end网格线布局效果

grid-column/row-start/end

--使用特定的网格线确定grid item在网格内的位置

参数说明

<line>:可以是一个数字来指定相应编号的网格线，也可使用名称指代相应命名的网格线

span <number>:网格项将跨越指定数量的网格轨道

span <name>:网格项将跨越一些轨道，直到碰到指定命名的网格线，必须结合start使用才有效，单独使用无效。

auto:自动布局，或则自动跨越，或则跨越一个默认的轨道

注意

1，如果没有声明grid-column-end/grid-row-end,默认情况下，该网格项将跨越1个轨道。

2，网格项可以相互重叠，可以直接使用z-index来控制它们的堆叠顺序