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属性：下边框所在的水平网格线

1. .item-1 {
   
2.   grid-column-start: 2;
   
3.   grid-column-end: 4;
   
4. }

复制代码

上面代码指定，1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线。



上图中，只指定了1号项目的左右边框，没有指定上下边框，所以会采用默认位置，即上边框是第一根水平网格线，下边框是第二根水平网格线。

除了1号项目以外，其他项目都没有指定位置，由浏览器自动布局，这时它们的位置由容器的grid-auto-flow属性决定，这个属性的默认值是row，因此会"先行后列"进行排列。读者可以把这个属性的值分别改成column、row dense和column dense，看看其他项目的位置发生了怎样的变化。

下面的例子是指定四个边框位置的效果。

1. .item-1 {
   
2.   grid-column-start: 1;
   
3.   grid-column-end: 3;
   
4.   grid-row-start: 2;
   
5.   grid-row-end: 4;
   
6. }

复制代码

这四个属性的值，除了指定为第几个网格线，还可以指定为网格线的名字。

1. .item-1 {
   
2.   grid-column-start: header-start;
   
3.   grid-column-end: header-end;
   
4. }

复制代码

上面代码中，左边框和右边框的位置，都指定为网格线的名字。

这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

.item-1 {
  grid-column-start: span 2;
}

上面代码表示，1号项目的左边框距离右边框跨越2个网格。




这与下面的代码效果完全一样。

1. .item-1 {
   
2.   grid-column-end: span 2;
   
3. }

复制代码

使用这四个属性，如果产生了项目的重叠，则使用z-index属性指定项目的重叠顺序。