Layout - Vant 4 📐
📐 Layout
Flexible grid system for responsive mobile layouts
🌟 Introduction
Build beautiful, responsive layouts effortlessly with our powerful grid system. Use van-row and van-col to create flexible, mobile-first designs that adapt to any screen size.
📦 Installation
Register component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from'vue'; import { Col, Row } from'vant'; const app = createApp(); app.use(Col); app.use(Row);🎨 Usage Examples
🌟 Basic Usage
Create responsive layouts with our 24-column grid system. Use span to control column width and offset for precise positioning:
📏 Column Spacing
Add perfect spacing between columns with the gutter attribute for clean, organized layouts:
↕️ Vertical Spacing
Control both horizontal and vertical spacing by passing an array [horizontal, vertical] for complete layout control:
🎯 Justify Content
Align your content exactly where you want it with flexible justification options:
🔧 API Reference
🏗️ Row Props
Configure your row container with these powerful layout options:
| Attribute | Description | Type | Default |
|---|---|---|---|
| gutter | Grid spacing��px�� | *number | string |
| tag | Custom element tag | string | div |
| justify | Flex main axis, can be set to end/center/space-around/space-between | string | start |
| align | Flex cross axis, be set to center/bottom | string | top |
| wrap | Whether to wrap | boolean | true |
📦 Col Props
Control individual column behavior and positioning:
| Attribute | Description | Type | Default |
|---|---|---|---|
| span | number of column the grid spans | *number | string* |
| offset | number of spacing on the left side of the grid | *number | string* |
| tag | Custom element tag | string | div |
📡 Row Events
Listen to user interactions with row containers:
| Event | Description | Arguments |
|---|---|---|
| click | Emitted when the row is clicked | event: MouseEvent |
📡 Col Events
Track interactions with individual columns:
| Event | Description | Arguments |
|---|---|---|
| click | Emitted when the col is clicked | event: MouseEvent |
📝 Types
Access comprehensive TypeScript definitions for better development experience:
importtype { ColProps, RowProps, RowAlign, RowJustify } from'vant';📚 Related Docs
Explore more components and resources to enhance your development experience:
Layout Components
- Grid - Advanced grid layout system
- Space - Spacing and alignment utilities
- Divider - Visual content separation
Container Components
Navigation & Structure
Development Resources
ConfigProvider - Global configuration and theming
Style Guide - Design system guidelines
External Links
- CSS Flexbox Guide - Learn about flexbox layouts
- Responsive Design Principles - Mobile-first design patterns