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; }