轱辘

网格

Grid - 网格，最多可分为24小格，可设置 gutter 和空白，默认支持响应式布局

使用该组件推荐设置，示例已设置

* { box-sizing: border-box; }

使用方法

浏览

代码

<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>
</div>

设置 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>
</x-row>

← Layout 布局 →