Grid - Vant 4
Grid
Create stunning grid layouts with ease! ✨ Perfect for organizing content, navigation menus, and interactive dashboards with responsive design.
📋 Intro
Divide your page into perfectly aligned blocks! 🎯 Grid provides flexible layout solutions for displaying content or creating intuitive navigation systems with equal-width columns.
📦 Install
Get started in seconds! 🚀 Register Grid components globally for seamless integration across your application.
Register component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from'vue'; import { Grid, GridItem } from'vant'; const app = createApp(); app.use(Grid); app.use(GridItem);🎨 Usage
Transform your layouts with powerful grid configurations! 💫 From basic grids to advanced customizations, create beautiful and functional interfaces.
🌟 Basic Usage
🔢 Column Num
Control your layout density! 📊 Adjust the number of columns to fit your content perfectly and create responsive designs.
🎨 Custom Content
Unleash your creativity! ✨ Add custom icons, text, and interactive elements to create unique grid experiences.
⬜ Square
Perfect proportions every time! 📐 Create square grid items for consistent, balanced layouts that look great on any device.
📏 Gutter
Add breathing room to your layout! 🌬️ Control spacing between grid items for better visual hierarchy and readability.
↔️ Horizontal
Flexible content arrangement! 🔄 Switch between vertical and horizontal layouts to match your design requirements.
🛣️ Route
Seamless navigation integration! 🧭 Connect grid items to routes for intuitive app navigation and user flow.
🔴 Show Badge
Add visual indicators and notifications! 🔔 Display badges, dots, and counters to highlight important information and updates.
🔧 API
Complete control over your grid layout! 🎛️ Configure every aspect from columns to styling with these comprehensive options.
📋 Grid Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| column-num | Column Num | *number | string* |
| icon-size | Icon size | *number | string* |
| gutter | Gutter | *number | string* |
| 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 | Whether to reverse the position of icon and text | boolean | false |
🎯 GridItem Props
Customize each grid item with precision! ✨ Control appearance, behavior, and navigation for perfect user experiences.
| 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 | Props of Badge, see Badge - props | BadgeProps | - |
| url | Link URL | string | - | | to | The target route should navigate to when clicked on, same as the to prop of Vue Router | string | object | - |
| replace | If true, the navigation will not leave a history record | boolean | false |
🎯 GridItem Events
Stay connected with user interactions! 📡 Handle clicks and touches to create responsive and engaging grid experiences.
| Event | Description | Arguments |
|---|---|---|
| click | Emitted when component is clicked | event: MouseEvent |
🎨 GridItem Slots
Unlimited customization possibilities! ✨ Replace default content with your own components and designs.
| Name | Description |
|---|---|
| default | Custom content |
| icon | Custom icon |
| text | Custom text |
📝 Types
Full TypeScript support for enhanced development! 🚀 Import these types for better code completion and type safety.
The component exports the following type definitions:
importtype { GridProps, GridDirection, GridItemProps } from'vant';🎨 Theming
Make it uniquely yours! 🌈 Customize every visual aspect with CSS variables for perfect brand alignment.
🎛️ 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 | var(--van-background-2) | - |
| --van-grid-item-content-active-color | var(--van-active-color) | - |
| --van-grid-item-icon-size | 28px | - |
| --van-grid-item-text-color | var(--van-text-color) | - |
| --van-grid-item-text-font-size | var(--van-font-size-sm) | - |
📚 Related Docs
Explore related components and features! 🔗 Build comprehensive layouts and navigation systems with these complementary tools.
- Icon - Beautiful icons for grid items
- Badge - Notification badges and indicators
- Button - Interactive buttons and actions
- Cell - List-style content cells
- Card - Content cards and containers
- Space - Layout spacing utilities
- Col - Column layout system
- Tabbar - Bottom navigation tabs
- NavBar - Top navigation bar
- Sidebar - Side navigation menu
- ConfigProvider - Global configuration
- Advanced Usage - Advanced implementation patterns