grid - 网格线命名

通过grid-template-rows和grid-template-columns定义网格时，网格线可以被命名。网格线名称也可以设置网格项目位置。

grid-template-rows和grid-template-columns定义你的网格，将名称分配给网格线。

定义网格线名称时需要避免使用规范中出现的关键词，以免导致混乱。

分配网格线名称必须用方括号[网格线名称]，然后后面紧跟网格轨道的尺寸值。

设置网格线名称有两种设置方式

1.设置单个网格线名称

 <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-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
   grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];
 }

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

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

grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end];
  grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end];

2.设置多个网格线名称

 <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-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];
   grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];
 }

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

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

grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end];
  grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end];

可以在方括号中添加多个名称来命名网格线名称，使用多外名称命名网格线名称时，名称间要用空格隔开.