Uniapp使用Grid布局, 真的爽!!!

以下是一个简单的Grid布局示例：

html: 
  <template>
  <view class="container">
    <view class="item item1">1</view>
    <view class="item item2">2</view>
    <view class="item item3">3</view>
    <view class="item item4">4</view>
    <view class="item item5">5</view>
    <view class="item item6">6</view>
  </view>
</template>

<style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    height: 300px;
    background-color: #f5f5f5;
    padding: 10px;
  }

  .item {
    background-color: #fff;
    text-align: center;
    font-size: 24px;
  }

  .item1 { grid-column: 1 / 3; }
  .item2 { grid-row: 1 / 3; }
  .item3 { grid-row: 1 / 3; }
  .item4 { grid-column: 3 / 4; }
  .item5 { grid-column: 1 / 2; }
  .item6 { grid-column: 2 / 4; }
</style>

在上面的代码中，我们第必定义了一个容器 .container，接着设置 display: grid; 将其布局方式设置为 Grid。

然后，我们通过 grid-template-columns 定义了网格列数以及每列的宽度，并通过 grid-gap 设置了网格之间的距离。

最后，我们定义了每个网格元素的样式和位置，通过 grid-row 和 grid-column 来设置行列跨度。

这样，我们就可以使用 Grid 布局来构建复杂的页面布局。