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;
}

?

1 2	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;
}

?

1 2	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];

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