小程序Grid网格布局记录

小程序Grid网格布局记录

<view class="grid-container">
    <view class="grid-item item1">1</view>
    <view class="grid-item item2">2</view>
    <view class="grid-item item3">3</view>
    <view class="grid-item item4">4</view>
    <view class="grid-item item5">5</view>
    <view class="grid-item item6">6</view>
    <view class="grid-item item7">7</view>
    <view class="grid-item item8">8</view>
    <view class="grid-item item9">9</view>
</view>

 

css

.grid-container {
  display:grid; /**声明**/
  grid-template-columns: 1fr 2fr 1fr 1fr; /**列数**/
  grid-gap: 10rpx; /**间隔**/
  height: 100vh;
}
.grid-item {
 background: skyblue;
}

.item1, .item8, .item9 {
 grid-column: 1 / 5; /**行：起始位置 / 结束位置**/
}

.item2{
 grid-column: 1 / 2;
 grid-row: 2 / 4; /**列：起始位置 / 结束位置**/
}

.item7 {
 grid-column: 4 / 5;
 grid-row: 2 / 4;
}