uniapp九宫格自定义行数和列数

在UniApp中，你可以使用flex布局来实现自定义行数和列数的九宫格。下面是一个示例代码：

<template>
  <view class="grid-container">
    <view v-for="(item, index) in gridData" :key="index" class="grid-item">{{item}}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      gridData: [1, 2, 3, 4, 5, 6, 7, 8, 9], // 九宫格数据
      rows: 3, // 行数
      columns: 3 // 列数
    };
  }
};
</script>

<style>
.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  width: calc(100% / var(--columns));
  height: calc(100% / var(--rows));
  border: 1px solid #ccc;
  box-sizing: border-box;
}
</style>

在上面的代码中，我们使用了flex布局来创建九宫格容器，通过设置`flex-wrap: wrap`可以实现自动换行。然后，通过计算每个网格项的宽度和高度，可以实现自定义的行数和列数。

请注意，上述示例中使用了CSS变量（--rows和--columns），这是为了方便修改行数和列数。你可以根据自己的需求修改这些值。

希望对你有帮助！如果还有其他问题，请随时提问。