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