Naive UI Design Layout

Layout System

Naive UI provides a comprehensive layout system including CSS Grid-based layout, Flexbox, Space, and Layout components for building responsive page structures.

When to Use

• Creating responsive grid layouts
• Building page structures with header, sidebar, content, and footer
• Implementing flexible layouts with Flexbox
• Adding consistent spacing between elements

Grid System (n-grid)

Naive UI uses a CSS Grid-based layout system with 24 columns by default.

Basic Concepts

• 24-column system: Default is 24 columns, configurable
• CSS Grid: Uses native CSS Grid for layout
• Responsive: Supports responsive breakpoints
• Flexible: Items can span multiple columns

Basic Grid

<template>
  <n-grid :cols="24">
    <n-gi :span="24">Full width</n-gi>
  </n-grid>
  
  <n-grid :cols="24">
    <n-gi :span="12">Half width</n-gi>
    <n-gi :span="12">Half width</n-gi>
  </n-grid>
  
  <n-grid :cols="24">
    <n-gi :span="8">One third</n-gi>
    <n-gi :span="8">One third</n-gi>
    <n-gi :span="8">One third</n-gi>
  </n-grid>
</template>

Grid with Gaps

<template>
  <n-grid :cols="4" :x-gap="12" :y-gap="8">
    <n-gi v-for="i in 8" :key="i">
      <div class="item">{{ i }}</div>
    </n-gi>
  </n-grid>
</template>

Responsive Grid

<template>
  <n-grid :cols="4" responsive="screen">
    <n-gi :span="4" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
      Responsive item
    </n-gi>
  </n-grid>
</template>

Grid Item Offset

<template>
  <n-grid :cols="24">
    <n-gi :span="6" :offset="6">Offset by 6</n-gi>
  </n-grid>
</template>

Grid Props

Grid Item Props

Flex Component (n-flex)

A flexible flexbox layout component.

Basic Flex

<template>
  <n-flex>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </n-flex>
</template>

Flex with Justify

<template>
  <n-flex justify="center">
    <div>Centered</div>
  </n-flex>
  
  <n-flex justify="space-between">
    <div>Left</div>
    <div>Right</div>
  </n-flex>
</template>

Flex Vertical

<template>
  <n-flex vertical>
    <div>Item 1</div>
    <div>Item 2</div>
  </n-flex>
</template>

Flex Props

Space Component (n-space)

Add consistent spacing between elements.

Basic Space

<template>
  <n-space>
    <n-button>Button 1</n-button>
    <n-button>Button 2</n-button>
    <n-button>Button 3</n-button>
  </n-space>
</template>

Space Sizes

<template>
  <n-space size="small">Small gap</n-space>
  <n-space size="medium">Medium gap</n-space>
  <n-space size="large">Large gap</n-space>
  <n-space :size="24">Custom 24px gap</n-space>
</template>

Vertical Space

<template>
  <n-space vertical>
    <n-button>Top</n-button>
    <n-button>Bottom</n-button>
  </n-space>
</template>

Space Props

Layout Components (n-layout)

Build complete page layouts with header, sidebar, content, and footer.

Basic Layout

<template>
  <n-layout>
    <n-layout-header>Header</n-layout-header>
    <n-layout-content>Content</n-layout-content>
    <n-layout-footer>Footer</n-layout-footer>
  </n-layout>
</template>

Layout with Sidebar

<template>
  <n-layout has-sider>
    <n-layout-sider>Sidebar</n-layout-sider>
    <n-layout>
      <n-layout-header>Header</n-layout-header>
      <n-layout-content>Content</n-layout-content>
      <n-layout-footer>Footer</n-layout-footer>
    </n-layout>
  </n-layout>
</template>

Collapsible Sidebar

<script setup>
import { ref } from 'vue'
const collapsed = ref(false)
</script>

<template>
  <n-layout has-sider>
    <n-layout-sider
      bordered
      collapse-mode="width"
      :collapsed-width="64"
      :width="240"
      :collapsed="collapsed"
      show-trigger
      @collapse="collapsed = true"
      @expand="collapsed = false"
    >
      Sidebar
    </n-layout-sider>
    <n-layout-content>Content</n-layout-content>
  </n-layout>
</template>

Layout Props

Layout Sider Props

Responsive Breakpoints

Naive UI uses default breakpoints for responsive design:

Using Breakpoints

<template>
  <n-grid :cols="4" responsive="screen">
    <n-gi :span="1" :xs="4" :s="2" :m="1">
      Responsive grid item
    </n-gi>
  </n-grid>
</template>

Best Practices

1. Use Grid for 2D layouts: Use n-grid when you need both rows and columns
2. Use Flex for 1D layouts: Use n-flex for single-row or single-column layouts
3. Use Space for simple gaps: Use n-space for consistent spacing between elements
4. Layout composition: Combine Layout components for full-page structures
5. Responsive design: Use responsive props for mobile-first design
6. Collapsed sidebar: Use collapse-mode="width" for better animation performance

Related Resources