grid - 使用相同的名称命名网格线和设置网格项目位置

1.使用repeat()函数可以给网格线分配相同的名称。这可以节省一定的时间

使用repeat()函数可以给网格线命名，这也导致多个网格线具有相同的网格线名称。

相同网格线名称指定网格线的位置和名称，也且会自动在网格线名称后面添加对应的数字，使其网格线名称也是唯一的标识符。

 <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 class='item'>8</view>
   <view class='item'>9</view>
 </view>

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

 .grid {
   /* padding: 1%; */
   display: grid;
   grid-gap: 1px;
   line-height: 100px;
   grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
   grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
 }

 .item1 {
 }

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

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

2. 使用相同的网格线名称可以设置网格项目的位置。网格线的名称和数字之间需要用空格分开。

在这个示例中，item1放置位置是row-start第2条开始，至row-end的第3条结束，这用来设置item1在行的起始和结束位置；col-start的第1条开始，至col-start的第3条结束（col-start的第3条也对应的是col-end的第2条），用来设置item1在列的起始位置和结束位置

 <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 class='item'>8</view>
   <view class='item'>9</view>
 </view>

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

 .grid {
   /* padding: 1%; */
   display: grid;
   grid-gap: 1px;
   line-height: 100px;
   grid-template-rows: repeat(3, [row-start] 1fr [row-end]);
   grid-template-columns: repeat(3, [col-start] 1fr [col-end]);
 }

 .item1 {
   grid-row: row-start 2 / row-end 3;
   grid-column: col-start / col-start 3;
 }

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

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