指定item位置

1. 按网格线指定⭐

grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边框所在的垂直网格线
grid-row-start属性：上边框所在的水平网格线
grid-row-end属性：下边框所在的水平网格线
取值:
- 可以用数字表示第几条网格线
- 可以用网格线的名字来指定
- 关键字span 数字: 表示跨越n个单元格
grid-column属性是grid-column-start和grid-column-end的合并简写形式
- 两个取值使用/隔开
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
- 每个取值间同样使用/隔开

#box2 span:nth-child(2){
  grid-area: 3 / 3;
}

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

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

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

上面代码表示，1号项目的左边框距离右边框跨越2个网格。这与下面的代码效果完全一样。

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

grid-area属性指定项目放在哪一个区域。

.item-1 {
grid-area: e;
}