Install

import { createApp } from 'vue';
import { Grid, GridItem } from 'vant';

const app = createApp();
app.use(Grid);
app.use(GridItem);

Usage

Basic Usage

<van-grid>
  <van-grid-item icon="photo-o" text="Text" />
  <van-grid-item icon="photo-o" text="Text" />
  <van-grid-item icon="photo-o" text="Text" />
  <van-grid-item icon="photo-o" text="Text" />
</van-grid>

Column Num

<van-grid :column-num="3">
  <van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="Text" />
</van-grid>

Custom Content

<van-grid :border="false" :column-num="3">
  <van-grid-item>
    <van-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
    />
  </van-grid-item>
  <van-grid-item>
    <van-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
    />
  </van-grid-item>
  <van-grid-item>
    <van-image
      src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg"
    />
  </van-grid-item>
</van-grid>

Square

<van-grid square>
  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />
</van-grid>

Gutter

<van-grid :gutter="10">
  <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="Text" />
</van-grid>

Horizontal

<van-grid direction="horizontal" :column-num="3">
  <van-grid-item icon="photo-o" text="\u6587\u5B57" />
  <van-grid-item icon="photo-o" text="\u6587\u5B57" />
  <van-grid-item icon="photo-o" text="\u6587\u5B57" />
</van-grid>

Route

<van-grid clickable :column-num="2">
  <van-grid-item icon="home-o" text="Vue Router" to="/" />
  <van-grid-item icon="search" text="URL" url="https://github.com" />
</van-grid>

Show Badge

<van-grid :column-num="2">
  <van-grid-item icon="home-o" text="Text" dot />
  <van-grid-item icon="search" text="Text" badge="99+" />
</van-grid>

API

Grid Props

Attribute	Description	Type	Default
column-num	Column Num	number \| string	`4`
icon-size	Icon size	number \| string	`28px`
gutter	Gutter	number \| string	`0`
border	Whether to show border	boolean	`true`
center	Whether to center content	boolean	`true`
square	Whether to be square shape	boolean	`false`
clickable	Whether to show click feedback when clicked	boolean	`false`
direction	Content arrangement direction, can be set to `horizontal`	string	`vertical`
reverse `v3.1.0`	Whether to reverse the position of icon and text	boolean	`false`

GridItem Props

Attribute	Description	Type	Default
text	Text	string	-
icon	Icon name or URL	string	-
icon-prefix	Icon className prefix	string	`van-icon`
icon-color	Icon color	string	-
dot	Whether to show red dot	boolean	`false`
badge	Content of the badge	number \| string	-
badge-props `v3.2.8`	Props of Badge, see Badge - props	BadgeProps	-
url	Link URL	string	-
to	Target route of the link, same as to of vue-router	string \| object	-
replace	If true, the navigation will not leave a history record	boolean	`false`

GridItem Events

Event	Description	Arguments
click	Emitted when component is clicked	event: MouseEvent

GridItem Slots

Name	Description
default	Custom content
icon	Custom icon
text	Custom text

Types

The component exports the following type definitions:

import type { GridProps, GridDirection, GridItemProps } from 'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-grid-item-content-padding	var(--van-padding-md) var(--van-padding-xs)	-
--van-grid-item-content-background-color	var(--van-background-color-light)	-
--van-grid-item-content-active-color	var(--van-active-color)	-
--van-grid-item-icon-size	28px	-
--van-grid-item-text-color	var(--van-gray-7)	-
--van-grid-item-text-font-size	var(--van-font-size-sm)	-

Grid

Intro