一般能夠將網格線命名成任何你想命名的名稱,若是網格線名稱添加-start
和-end
的後綴,其實也隱式的建立一個網格區域,能夠用來設置網格項目的位置.css
在這個示例中,行和列都具備inner-start
和inner-end
網格線名稱,同時也對應的建立一個隱式網格區域名稱inner
ide
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>
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: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end]; 12 grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [inner-end]; 13 } 14 15 .item1 { 16 grid-area: inner; 17 } 18 19 .item { 20 text-align: center; 21 background-color: #d94a6a; 22 } 23 24 .item1 { 25 text-align: center; 26 /* line-height: 300px; */ 27 background-color: #1aa034; 28 }
grid-area: inner;