vant dialog,vant design vue,vant grid 背景颜色,vant布局,vant 教程,vant怎么用
Vant4 Grid 宫格是一个基于Vue.js框架的网格组件库，可用于构建响应式的网格布局。它提供了多种布局方式、自定义样式和事件绑定等功能。

Vant4 Grid 宫格主要由van-grid和van-grid-item两个组件组成。van-grid用于定义网格布局，包括行数、列数、间距等，而van-grid-item则用于表示网格中的每个单元格，可以放置任意内容。

以下是一个简单的示例，展示如何使用van-grid和van-grid-item创建一个3x3的宫格，并在其中填充一些文本和图片：

html
<template>
<van-grid :column-num="3" :square="true">
<van-grid-item v-for="(item, index) in gridData" :key="index">
<div>{{ item.text }}</div>
<img :src="item.imgUrl">
</van-grid-item>
</van-grid>
</template>

<script>
export default {
data() {
return {
gridData: [
{ text: 'Item 1', imgUrl: 'https://picsum.photos/200' },
{ text: 'Item 2', imgUrl: 'https://picsum.photos/200' },
{ text: 'Item 3', imgUrl: 'https://picsum.photos/200' },
{ text: 'Item 4', imgUrl: 'https://picsum.photos/200' },
{ text: 'Item 5', imgUrl: 'https://picsum.photos/200' },
{ text: 'Item 6', imgUrl: 'https://picsum.photos/200' },
{ text: 'Item 7', imgUrl: 'https://picsum.photos/200' },
{ text: 'Item 8', imgUrl: 'https://picsum.photos/200' },
{ text: 'Item 9', imgUrl: 'https://picsum.photos/200' }
]
};
}
};
</script>


在这个示例中，我们使用van-grid定义了一个3x3的宫格，并使用v-for指令遍历gridData数组来填充每个网格单元格。每个单元格包含一个文本和一张图片，通过绑定img标签的src属性来动态加载不同的图片。该宫格还有一个:square="true"的属性，使得每个单元格都是正方形。

以上就是Vant4 Grid 宫格的简单介绍和示例。