Van Grid

Vant Grid Component

Grid component used to divide the page into blocks of equal width in the horizontal direction for displaying content or page navigation.

When to Invoke

Invoke this skill when:

• User needs to create a grid layout with equal-width items
• User wants to implement a navigation menu with icons
• User needs to display items in a grid format
• User wants to customize grid columns and spacing
• User asks about square grid items or gutter settings

Features

• Flexible Columns: Customize the number of columns
• Square Items: Option to make grid items square
• Gutter Support: Add spacing between items
• Border Control: Show or hide borders
• Badge Support: Display badges on grid items
• Router Navigation: Navigate to routes or URLs
• Custom Content: Full control over item content via slots
• Direction Control: Vertical or horizontal content arrangement

API Reference

Grid Props

GridItem Props

GridItem Events

GridItem Slots

Types

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

Usage Examples

Basic Usage

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

Custom Column Number

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

Custom Content

<template>
  <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>
</template>

Square Grid

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

With Gutter

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

Horizontal Layout

<template>
  <van-grid direction="horizontal" :column-num="3">
    <van-grid-item icon="photo-o" text="Photo" />
    <van-grid-item icon="photo-o" text="Photo" />
    <van-grid-item icon="photo-o" text="Photo" />
  </van-grid>
</template>

Route Navigation

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

Show Badge

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

Custom Icon Color

<template>
  <van-grid :column-num="4">
    <van-grid-item icon="home-o" text="Home" icon-color="#1989fa" />
    <van-grid-item icon="search" text="Search" icon-color="#07c160" />
    <van-grid-item icon="setting-o" text="Settings" icon-color="#ee0a24" />
    <van-grid-item icon="user-o" text="User" icon-color="#ff976a" />
  </van-grid>
</template>

Best Practices

1. Choose appropriate columns: Use 4 columns for mobile, 3 for tablets
2. Use square for icons: Enable square when displaying icon grids
3. Add gutter for spacing: Use gutter to create visual separation
4. Enable clickable: Add clickable for navigation items
5. Limit items: Keep grid items under 8 for better UX
6. Use badges wisely: Show badges only for items requiring attention