uniapp九宫格布局，带效果图

UniApp 提供了一套丰富的组件库，其中包括九宫格布局的实现。九宫格布局常用于展示商品列表、信息卡片等场景，它将屏幕划分为9个相等大小的部分，每个部分可以显示独立的内容。

在 UniApp 中，你可以使用 `uni-grid` 组件来创建九宫格布局，配合 `uni-col` 来定义每个单元格的宽度。这里是一个简单的示例代码：

<template>
  <view class="grid-container">
    <uni-grid class="grid" :gutter="20" justify="space-between">
      <uni-col v-for="(item, index) in items" :key="index" :span="3" :class="{ active: item.isActive }">
        <view class="grid-item">
          <image :src="item.image" :mode="item.imageMode" />
          <text>{{ item.title }}</text>
        </view>
      </uni-col>
    </uni-grid>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        // 样例数据
        { image: 'your-image-url-1', title: 'Item 1', isActive: false, imageMode: 'cover' },
        // ... 其他8个元素
      ],
    };
  },
};
</script>

<style scoped>
.grid-container {
  padding: 20px;
}

.grid {
  width: 100%;
}

.grid-item {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  padding: 10px;
}
.active {
  background-color: #e6f7ff;
}
</style>

在这个例子中，`items` 数组包含九个对象，每个对象代表一个网格单元，`span` 属性定义了每个单元格占据的列数（这里为3），`isActive` 可以用来切换单元格的选中状态。

对于效果图，由于文本平台限制，我无法直接提供图片，但你可以在 UniApp 的官方文档或者在线编辑器（如 HBuilderX 的 Playground）中查看实际效果。相关问题如下：

1. 如何调整 `uni-grid` 的行高和列宽？
2. 如何控制九宫格内元素的滚动？
3. 如何响应用户的点击事件来切换单元格状态？