鑫 UI

# Grid 栅格

使用方法

# 24网格

# 预览

# 示例代码

<x-row class="demoRow">
  <x-col span="8">
    <div class="demoCol">8</div>
  </x-col>
  <x-col span="8">
    <div class="demoCol">8</div>
  </x-col>
  <x-col span="8">
    <div class="demoCol">8</div>
  </x-col>
</x-row>
<x-row class="demoRow">
  <x-col span="6">
    <div class="demoCol">6</div>
  </x-col>
  <x-col span="6">
    <div class="demoCol">6</div>
  </x-col>
  <x-col span="6">
    <div class="demoCol">6</div>
  </x-col>
  <x-col span="6">
    <div class="demoCol">6</div>
  </x-col>
</x-row>
<x-row class="demoRow">
  <x-col span="4">
    <div class="demoCol">4</div>
  </x-col>
  <x-col span="4">
    <div class="demoCol">4</div>
  </x-col>
  <x-col span="4">
    <div class="demoCol">4</div>
  </x-col>
  <x-col span="4">
    <div class="demoCol">4</div>
  </x-col>
  <x-col span="4">
    <div class="demoCol">4</div>
  </x-col>
  <x-col span="4">
    <div class="demoCol">4</div>
  </x-col>
</x-row>
<x-row class="demoRow">
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
</x-row>

# 设置 gutter

# 预览

# 示例代码

<x-row class="demoRow" gutter="10">
  <x-col span="8">
    <div class="demoCol">8</div>
  </x-col>
  <x-col span="8">
    <div class="demoCol">8</div>
  </x-col>
  <x-col span="8">
    <div class="demoCol">8</div>
  </x-col>
</x-row>
<x-row class="demoRow" gutter="10">
  <x-col span="6">
    <div class="demoCol">6</div>
  </x-col>
  <x-col span="6">
    <div class="demoCol">6</div>
  </x-col>
  <x-col span="6">
    <div class="demoCol">6</div>
  </x-col>
  <x-col span="6">
    <div class="demoCol">6</div>
  </x-col>
</x-row>

# 设置空隙

# 预览

# 示例代码

<x-row class="demoRow" gutter="10">
  <x-col span="8">
    <div class="demoCol">8</div>
  </x-col>
  <x-col span="8" offset="8">
    <div class="demoCol">8</div>
  </x-col>
</x-row>
<x-row class="demoRow" gutter="10">
  <x-col span="6" offset="6">
    <div class="demoCol">6</div>
  </x-col>
  <x-col span="6" offset="6">
    <div class="demoCol">6</div>
  </x-col>
</x-row>
<x-row class="demoRow" gutter="10">
  <x-col span="4">
    <div class="demoCol">4</div>
  </x-col>
  <x-col span="4" offset="4">
    <div class="demoCol">4</div>
  </x-col>
  <x-col span="4" offset="8">
    <div class="demoCol">4</div>
  </x-col>
</x-row>
<x-row class="demoRow" gutter="10">
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2" offset="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2" offset="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2" offset="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2">
    <div class="demoCol">2</div>
  </x-col>
  <x-col span="2" offset="2">
    <div class="demoCol">2</div>
  </x-col>
</x-row>

# Attributes

# Row

参数 说明 类型 可选值 默认值
gutter 间距 String、Number -- 0
position 对齐方式 String left、center、right left

# Col

参数 说明 类型 可选值 默认值
span 栅格占据的列数 String、Number 1-24 --
offset 栅格左侧的间隔格数 String、Number 1-24 --
ipad ipad响应式布局 Number、Object span数字或{span:1;offset:1} --
narrowPc 窄屏幕响应式布局 Number、Object span数字或{span:1;offset:1} --
pc 普通电脑响应式布局 Number、Object span数字或{span:1;offset:1} --
widePc 宽屏响应式布局 Number、Object span数字或{span:1;offset:1} --

← Layout 布局 →