grid - 网格项目跨行或跨列

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

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

 <view class="grid">
   <view class='item1'>1</view>
   <view class='item'>2</view>
   <view class='item'>3</view>
   <view class='item'>4</view>
   <view class='item'>5</view>
   <view class='item'>6</view>
   <view class='item'>7</view>
 </view>

 page {
   color: #fff;
   font-size: 16px;
 }

 .grid {
   /* padding: 1%; */
   display: grid;
   grid-gap: 1px;
   line-height: 100px;
   grid-template-columns: repeat(3, 1fr);
 }

 .item1 {
   grid-column-start:;
   grid-column-end:;
   /* grid-row-start: 1;
   grid-row-end: 4; */
 }

 .item {
   text-align: center;
   background-color: #d94a6a;
 }

 .item1 {
   text-align: center;
   /* line-height: 300px; */
   background-color: #1aa034;
 }

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

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

 <view class="grid">
   <view class='item1'>1</view>
   <view class='item'>2</view>
   <view class='item'>3</view>
   <view class='item'>4</view>
   <view class='item'>5</view>
   <view class='item'>6</view>
   <view class='item'>7</view>
 </view>

 page {
   color: #fff;
   font-size: 16px;
 }

 .grid {
   /* padding: 1%; */
   display: grid;
   grid-gap: 1px;
   line-height: 100px;
   grid-template-columns: repeat(3, 1fr);
 }

 .item1 {
   grid-row-start:;
   grid-row-end:;
 }

 .item {
   text-align: center;
   background-color: #d94a6a;
 }

 .item1 {
   text-align: center;
   line-height: 300px;
   background-color: #1aa034;
 }

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

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

 <view class="grid">
   <view class='item1'>1</view>
   <view class='item'>2</view>
   <view class='item'>3</view>
   <view class='item'>4</view>
   <view class='item'>5</view>
   <view class='item'>6</view>
   <view class='item'>7</view>
 </view>

 page {
   color: #fff;
   font-size: 16px;
 }

 .grid {
   /* padding: 1%; */
   display: grid;
   grid-gap: 1px;
   line-height: 100px;
   grid-template-columns: repeat(3, 1fr);
 }

 .item1 {
   grid-row: 2 / 5;
   grid-column: 2 / 4;
 }

 .item {
   text-align: center;
   background-color: #d94a6a;
 }

 .item1 {
   text-align: center;
   line-height: 300px;
   background-color: #1aa034;
 }

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

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

 <view class="grid">
   <view class='item1'>1</view>
   <view class='item'>2</view>
   <view class='item'>3</view>
   <view class='item'>4</view>
   <view class='item'>5</view>
   <view class='item'>6</view>
   <view class='item'>7</view>
 </view>

 page {
   color: #fff;
   font-size: 16px;
 }

 .grid {
   /* padding: 1%; */
   display: grid;
   grid-gap: 1px;
   line-height: 100px;
   grid-template-columns: repeat(3, 1fr);
 }

 .item1 {
   grid-row: 2 / span 3;
   grid-column: span 2;
 }

 .item {
   text-align: center;
   background-color: #d94a6a;
 }

 .item1 {
   text-align: center;
   line-height: 300px;
   background-color: #1aa034;
 }

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