vant ui教程,vant dialog,vant tab,vant菜单,vant tabs,vant教程
Vant3是一款基于Vue.js的移动端UI组件库，其中包含了多种常用的布局组件，称为Vant3 Layout。

Vant3 Layout布局组件主要用于快速实现移动端页面的排版和布局，可以帮助开发者快速创建各种常见的页面布局，如顶部导航栏、底部Tab栏、卡片式布局等。以下是几个常用的Vant3 Layout布局组件及其说明：

1. Van-Row/Van-Col：用于实现网格布局，Van-Row表示行，Van-Col表示列，可以指定每个元素所占宽度和上下左右的间距。

html
<van-row>
<van-col span="8" offset="4">col1</van-col>
<van-col span="8">col2</van-col>
</van-row>


2. Van-Grid：用于实现九宫格布局，可以指定每个格子内的图标、文字和点击事件等。

html
<van-grid :column-num="3">
<van-grid-item icon="photo-o" text="相册" />
<van-grid-item icon="camera-o" text="拍照" />
<van-grid-item icon="search" text="搜索" />
<van-grid-item icon="star-o" text="收藏" />
</van-grid>


3. Van-Card：用于实现卡片式布局，可以设置标题、副标题、封面图片等。

html
<van-card
num="2"
price="2.00"
origin-price="20.00"
title="商品标题"
desc="商品描述商品描述商品描述商品描述商品描述商品描述商品描述"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
>
<template #tags>
<van-tag plain round>标签一</van-tag>
<van-tag plain round>标签二</van-tag>
</template>
<template #footer>
<van-button size="small" round>按钮</van-button>
<van-button size="small" round type="primary">按钮</van-button>
</template>
</van-card>


这些Vant3 Layout布局组件可以根据不同的页面需求进行灵活组合使用，以实现各种复杂的移动端页面布局。