n-legacy-grid

name	n-legacy-grid
description	Legacy grid system based on row and column layout. Invoke when user needs to implement traditional 24-column grid layouts in Naive UI.
metadata	{"author":"jiaiyan","version":"1.0.0"}

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

1. Prefer n-grid: At most of time you should use the newer Grid component based on CSS Grid

2. Use for legacy support: Use legacy grid when maintaining older projects

3. Gutter format: Use array format [horizontal, vertical] for both directions

4. Push/Pull for reordering: Use push and pull for visual reordering without changing DOM order

5. 24-column system: Remember the total is 24 columns

6. Span calculation: Ensure total span in a row doesn't exceed 24