grid - 網格項目層級

網格項目能夠具備層級和堆棧，必要時可能經過z-index屬性來指定.

 

1.在這個例子中，item1和item2的開始行都是1，item1列的開始是1，item2列的開始是2，而且它們都跨越兩列。兩個網格項目都是由網格線數字定位，結果這兩個網格項目重疊了。

默認狀況下，item2在item1上面，可是，咱們在item1中設置了z-index:1;，致使item1在item2之上。

 

 1 <view class="grid">
 2   <view class='item1'>1</view>
 3   <view class='item2'>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 }
12 
13 .item1 {
14 }
15 
16 .item1, .item2 {
17  grid-row-start: 1;
18  grid-column-end: span 2;
19 }
20 
21 .item1 {
22  grid-column-start: 1;
23  z-index: 1;
24 }
25 
26 .item2 {
27  grid-column-start: 2;
28 }
29 
30 .item {
31  text-align: center;
32  background-color: #d94a6a;
33 }
34 
35 .item1,.item2 {
36  text-align: center;
37   /* line-height: 300px; */
38  background-color: #1aa034;
39 }

View Code

 

 

2.一個網格項目定位和分層使用了grid-template-areas定義的隱式網格線的名稱

 

 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 }
12 
13 .item1 {
14 }
15 
16 .item1, .item2 {
17   grid-row-start: 1;
18   grid-column-end: span 2;
19 }
20 
21 .item1 {
22   grid-row-start: header-start;
23   grid-row-end: content-end;
24   grid-column-start: content-start;
25   grid-column-end: sidebar-start;
26   z-index: 1;
27 }
28 
29 .item2 {
30   grid-column-start: 2;
31 }
32 
33 .item {
34   text-align: center;
35   background-color: #d94a6a;
36 }
37 
38 .item1, .item2 {
39   text-align: center;
40   /* line-height: 300px; */
41   background-color: #1aa034;
42 }

View Code