1.使用repeat()函數可以給網格線分配相同的名稱。這可以節省一定的時間

?

使用repeat()函數可以給網格線命名，這也導致多個網格線具有相同的網格線名稱。

相同網格線名稱指定網格線的位置和名稱，也且會自動在網格線名稱后面添加對應的數字，使其網格線名稱也是唯一的標識符。

1 <view class="grid"> 2 <view class='item1'>1</view> 3 <view class='item'>2</view> 4 <view class='item'>3</view> 5 <view class='item'>4</view> 6 <view class='item'>5</view> 7 <view class='item'>6</view> 8 <view class='item'>7</view> 9 <view class='item'>8</view> 10 <view class='item'>9</view> 11 </view> View Code 1 page { 2 color: #fff; 3 font-size: 16px; 4 } 5 6 .grid { 7 /* padding: 1%; */ 8 display: grid; 9 grid-gap: 1px; 10 line-height: 100px; 11 grid-template-rows: repeat(3, [row-start] 1fr [row-end]); 12 grid-template-columns: repeat(3, [col-start] 1fr [col-end]); 13 } 14 15 .item1 { 16 } 17 18 .item { 19 text-align: center; 20 background-color: #d94a6a; 21 } 22 23 .item1 { 24 text-align: center; 25 /* line-height: 300px; */ 26 background-color: #1aa034; 27 } View Code

?

?

2.?使用相同的網格線名稱可以設置網格項目的位置。網格線的名稱和數字之間需要用空格分開。

在這個示例中，item1放置位置是row-start第2條開始，至row-end的第3條結束，這用來設置item1在行的起始和結束位置；col-start的第1條開始，至col-start的第3條結束（col-start的第3條也對應的是col-end的第2條），用來設置item1在列的起始位置和結束位置

1 <view class="grid"> 2 <view class='item1'>1</view> 3 <view class='item'>2</view> 4 <view class='item'>3</view> 5 <view class='item'>4</view> 6 <view class='item'>5</view> 7 <view class='item'>6</view> 8 <view class='item'>7</view> 9 <view class='item'>8</view> 10 <view class='item'>9</view> 11 </view> View Code 1 page { 2 color: #fff; 3 font-size: 16px; 4 } 5 6 .grid { 7 /* padding: 1%; */ 8 display: grid; 9 grid-gap: 1px; 10 line-height: 100px; 11 grid-template-rows: repeat(3, [row-start] 1fr [row-end]); 12 grid-template-columns: repeat(3, [col-start] 1fr [col-end]); 13 } 14 15 .item1 { 16 grid-row: row-start 2 / row-end 3; 17 grid-column: col-start / col-start 3; 18 } 19 20 .item { 21 text-align: center; 22 background-color: #d94a6a; 23 } 24 25 .item1 { 26 text-align: center; 27 /* line-height: 300px; */ 28 background-color: #1aa034; 29 } View Code

?

轉載于:https://www.cnblogs.com/cisum/p/10675633.html

總結

以上是生活随笔為你收集整理的grid - 使用相同的名称命名网格线和设置网格项目位置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。