jiaiyan Naive UI Legacy Grid Component
A basic grid system based on traditional row and column layout. At most of time you should use Grid (n-grid) instead.
When to Use
Use this component when:
- Legacy projects: Maintaining older codebases that use traditional grid
- Simple grids: Basic row-column layouts without responsive needs
- Browser compatibility: When CSS Grid support is not available
When to Invoke
Invoke this skill when:
- User needs to implement a traditional row-column grid
- User wants to use push/pull for column reordering
- User needs basic offset functionality
- User asks about legacy grid system
Features
- 24-Column System: Standard 24-column grid
- Gutter Support: Horizontal and vertical gutters
- Offset: Column offset support
- Push & Pull: Column reordering with push/pull
- Simple API: Straightforward row and column structure
API Reference
Row Props
| Name | Type | Default | Description |
|---|---|---|---|
| gutter | number | string | [number, number] | [string, string] |
0 |
horizontal gutter or [horizontal gutter, vertical gutter] |
Col Props
| Name | Type | Default | Description |
|---|---|---|---|
| span | number |
1 |
Number of columns to span |
| offset | number |
0 |
Number of columns to offset |
| push | number |
0 |
Number of columns to push right |
| pull | number |
0 |
Number of columns to pull left |
Basic Usage
Basic Grid
<template>
<n-row gutter="12">
<n-col :span="6">
<div class="light-green" />
</n-col>
<n-col :span="6">
<div class="green" />
</n-col>
<n-col :span="6">
<div class="light-green" />
</n-col>
<n-col :span="6">
<div class="green" />
</n-col>
</n-row>
</template>
<style scoped>
.light-green {
height: 108px;
background-color: rgba(0, 128, 0, 0.12);
}
.green {
height: 108px;
background-color: rgba(0, 128, 0, 0.24);
}
</style>
Gutter
<template>
<n-row :gutter="[12, 8]">
<n-col :span="6">
<div class="light-green" />
</n-col>
<n-col :span="6">
<div class="green" />
</n-col>
<n-col :span="6">
<div class="light-green" />
</n-col>
<n-col :span="6">
<div class="green" />
</n-col>
</n-row>
</template>
Offset
<template>
<n-row :gutter="12">
<n-col :span="6" :offset="6">
<div class="light-green" />
</n-col>
<n-col :span="6" :offset="6">
<div class="green" />
</n-col>
</n-row>
</template>
Common Patterns
Push & Pull
<template>
<n-row :gutter="12">
<n-col :span="6" :push="6">
<div class="light-green">Pushed 6</div>
</n-col>
<n-col :span="6" :pull="6">
<div class="green">Pulled 6</div>
</n-col>
<n-col :span="6">
<div class="light-green">Normal</div>
</n-col>
<n-col :span="6">
<div class="green">Normal</div>
</n-col>
</n-row>
</template>
Full Width Column
<template>
<n-row :gutter="12">
<n-col :span="24">
<div class="green">Full Width</div>
</n-col>
</n-row>
</template>
Mixed Column Sizes
<template>
<n-row :gutter="12">
<n-col :span="8">
<div class="light-green">Span 8</div>
</n-col>
<n-col :span="8">
<div class="green">Span 8</div>
</n-col>
<n-col :span="4">
<div class="light-green">Span 4</div>
</n-col>
<n-col :span="4">
<div class="green">Span 4</div>
</n-col>
</n-row>
</template>
Nested Rows
<template>
<n-row :gutter="12">
<n-col :span="12">
<n-row :gutter="8">
<n-col :span="12">
<div class="light-green">Nested 1</div>
</n-col>
<n-col :span="12">
<div class="green">Nested 2</div>
</n-col>
</n-row>
</n-col>
<n-col :span="12">
<div class="light-green">Main Column</div>
</n-col>
</n-row>
</template>
Best Practices
Prefer n-grid: At most of time you should use the newer Grid component based on CSS Grid
Use for legacy support: Use legacy grid when maintaining older projects
Gutter format: Use array format
[horizontal, vertical]for both directionsPush/Pull for reordering: Use push and pull for visual reordering without changing DOM order
24-column system: Remember the total is 24 columns
Span calculation: Ensure total span in a row doesn't exceed 24