CSS Grid 网格布局教程(4元素属性: 指定元素网格线)
4.1 grid-column-start 属性，grid-column-end 属性，grid-row-start 属性，grid-row-end 属性项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
.item-1 {
grid-column-start: 2;
grid-column-end: 4;
}
上面代码指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。
上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。
除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。读者可以把这个属性的值分别改成column、row dense和column dense，看看其他项目的位置发生了怎样的变化。
下面的例子是指定四个边框位置的效果。
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。
.item-1 {
grid-column-start: header-start;
grid-column-end: header-end;
}
上面代码中，左边框和右边框的位置，都指定为网格线的名字。
这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
.item-1 {
grid-column-start: span 2;
}
上面代码表示，1号项目的左边框距离右边框跨越2个网格。
这与下面的代码效果完全一样。
.item-1 {
grid-column-end: span 2;
}
使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。
页:
[1]