CSS Grid布局(2)

6.间距

grid-column-gap和grid-row-gap属性用来创建列与列，行与行之间的间距

间距(Gap)可以设置任何非负值，长度值可以是px、%、em等单位值

grid-gap是grid-row-gap和grid-column-gap两个属性的缩写

如果它指定了两个值，那么第一个值是设置grid-row-gap的值，第二个值设置grid-column-gap的值

如果只设置了一个值，表示行和列的间距相等，也就是说grid-row-gap和grid-column-gap的值都相同

7.通过网格线号码来定位网格项目

网格线实际上是代表线的开始、结束，两条线之间就是网格列或行

每条线是从网格轨道开始，网格的网格线从1开始，每条网格线逐步增加1

两列三行的网格创建三条列网格线和四条行网格线。item1就是由行和列的号码重新定位

如果一个网格项目跨度只有一行或一列，那么grid-row-end和grid-column-end不是必需的

grid-row是grid-row-start和grid-row-end的简写。grid-column是grid-column-start和grid-column-end的简写

如果只提供一个值，他指定了grid-row-start和grid-column-start的值

如果提供两个值，第一个值是grid-row-start、grid-column-start的值，第二个值是grid-row-end、grid-column-end的值，两者之间必须要用/隔开

如果指定四个值，第一个值对应grid-row-start，第二个值对应grid-column-start，第三个值对应grid-row-end和第四个值对应grid-column-end

8.网格项目跨行或跨列

默认情况下网格项目跨度只有一个列和行，但可以跨越多个行和列

可以通过设置grid-column-end和grid-column-start距离多个网络线号实现多个列跨越

同样的可以通过grid-row-end和grid-row-start距离多个网格号实现多个行跨越

通过简写的grid-row和grid-column也能实现多行或多列的跨越

关键词span后面紧随数字，表示合并多少个列或行