CSS Grid 网格布局教程(4元素属性: grid-column 属性，grid-row 属性)

君山

4.2 grid-column 属性，grid-row 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

1. .item {
   
2.   grid-column: <start-line> / <end-line>;
   
3.   grid-row: <start-line> / <end-line>;
   
4. }

复制代码

下面是一个例子。

1. .item-1 {
   
2.   grid-column: 1 / 3;
   
3.   grid-row: 1 / 2;
   
4. }
   
5. /* 等同于 */
   
6. .item-1 {
   
7.   grid-column-start: 1;
   
8.   grid-column-end: 3;
   
9.   grid-row-start: 1;
   
10.   grid-row-end: 2;
    
11. }

复制代码

上面代码中，项目item-1占据第一行，从第一根列线到第三根列线。

这两个属性之中，也可以使用span关键字，表示跨越多少个网格。

1. 
   
2. .item-1 {
   
3.   background: #b03532;
   
4.   grid-column: 1 / 3;
   
5.   grid-row: 1 / 3;
   
6. }
   
7. /* 等同于 */
   
8. .item-1 {
   
9.   background: #b03532;
   
10.   grid-column: 1 / span 2;
    
11.   grid-row: 1 / span 2;
    
12. }

复制代码

上面代码中，项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列。




斜杠以及后面的部分可以省略，默认跨越一个网格。

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

复制代码

上面代码中，项目item-1占据左上角第一个网格。