默认情况下网格项目跨度只有一个列和行，但可以跨越多个行和列。

 

1.可以通过设置grid-column-end和grid-column-start距离多个网络线号实现多个列跨越.

 

1 
      
       2   
       
        1
       3   
       
        2
       4   
       
        3
       5   
       
        4
       6   
       
        5
       7   
       
        6
       8   
       
        7
       9 
      

 

1 page { 2   color: #fff; 3   font-size: 16px; 4 } 5  6 .grid { 7   /* padding: 1%; */ 8   display: grid; 9   grid-gap: 1px;10   line-height: 100px;11   grid-template-columns: repeat(3, 1fr);12 }13 14 .item1 {15   grid-column-start: 1;16   grid-column-end: 4;17   /* grid-row-start: 1;18   grid-row-end: 4; */19 }20 21 .item {22   text-align: center;23   background-color: #d94a6a;24 }25 26 .item1 {27   text-align: center;28   /* line-height: 300px; */29   background-color: #1aa034;30 }

 

 

grid-column-start: 1; grid-column-end: 4;

 

2.同样的可以通过grid-row-end和grid-row-start距离多个网格号实现多个行跨越

1 
      
       2   
       
        1
       3   
       
        2
       4   
       
        3
       5   
       
        4
       6   
       
        5
       7   
       
        6
       8   
       
        7
       9 
      

1 page { 2   color: #fff; 3   font-size: 16px; 4 } 5  6 .grid { 7   /* padding: 1%; */ 8   display: grid; 9   grid-gap: 1px;10   line-height: 100px;11   grid-template-columns: repeat(3, 1fr);12 }13 14 .item1 {15   grid-row-start: 1;16   grid-row-end: 4;17 }18 19 .item {20   text-align: center;21   background-color: #d94a6a;22 }23 24 .item1 {25   text-align: center;26   line-height: 300px;27   background-color: #1aa034;28 }

grid-row-start: 1;grid-row-end: 4;

3.通过简写的grid-row和grid-column也能实现多行或多列的跨越

1 
      
       2   
       
        1
       3   
       
        2
       4   
       
        3
       5   
       
        4
       6   
       
        5
       7   
       
        6
       8   
       
        7
       9 
      

1 page { 2   color: #fff; 3   font-size: 16px; 4 } 5  6 .grid { 7   /* padding: 1%; */ 8   display: grid; 9   grid-gap: 1px;10   line-height: 100px;11   grid-template-columns: repeat(3, 1fr);12 }13 14 .item1 {15   grid-row: 2 / 5;16   grid-column: 2 / 4;17 }18 19 .item {20   text-align: center;21   background-color: #d94a6a;22 }23 24 .item1 {25   text-align: center;26   line-height: 300px;27   background-color: #1aa034;28 }

grid-row: 2 / 5;grid-column: 2 / 4;

 

 

4.关键词span后面紧随数字，表示合并多少个列或行

1 
      
       2   
       
        1
       3   
       
        2
       4   
       
        3
       5   
       
        4
       6   
       
        5
       7   
       
        6
       8   
       
        7
       9 
      

1 page { 2   color: #fff; 3   font-size: 16px; 4 } 5  6 .grid { 7   /* padding: 1%; */ 8   display: grid; 9   grid-gap: 1px;10   line-height: 100px;11   grid-template-columns: repeat(3, 1fr);12 }13 14 .item1 {15   grid-row: 2 / span 3;16   grid-column: span 2;17 }18 19 .item {20   text-align: center;21   background-color: #d94a6a;22 }23 24 .item1 {25   text-align: center;26   line-height: 300px;27   background-color: #1aa034;28 }

grid-row: 2 / span 3;grid-column: span 2;