Grid容器（container）元素的直接子元素就是所谓的Grid项。（本小节后文就简称之为该子项）
grid-column属性可以定义该子项放在哪几列上，具体定义的方式是定义该子项从哪一列开始，哪一列结束。
grid-column属性其实是通吃了grid-column-start和grid-column-end属性。
案例1
使item1子项从列线1开始到列线5结束。（有关Grid线请参考Grid简介中的示意图）
#item1 {
grid-column: 1 / 5;
}
案例2
使item1子项从列线1开始，跨3列结束。（span 3）
#item1 {
grid-column: 1 / span 3;
}
案例3
在上述案例2的基础上，使item2子项从列线2开始，跨3列结束。
#item1 {
grid-column: 1 / span 3;
}
#item2 {
grid-column: 2 / span 3;
}
grid-row属性可以定义该子项放在哪几行上，具体定义的方式是定义该子项从哪一行开始，哪一行结束。
grid-row属性其实是通吃了grid-row-start和grid-row-end属性。
案例1
使item1子项从行线1开始到行线4结束。（有关Grid线请参考Grid简介中的示意图）
#item1 {
grid-row: 1 / 4;
}
案例2
使item1子项从行线1开始跨2行结束。（有关Grid线请参考Grid简介中的示意图）
#item1 {
grid-row: 1 / 4;
}
grid-area属性是通吃了grid-row-start、grid-column-start、grid-row-end、grid-column-end四种属性。
通过grid-area属性可以同时定义子项的行列起始。
案例1
使item8子项从行线1开始，到行线5结束；从列线2开始，到列线6结束。
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
案例2
使item8子项从行线2开始，跨2行结束；从列线1开始，跨3列结束。
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}