<style scoped>
    .grid-content{
        line-height: 40px;
        min-height: 40px;
        background-color: #e3e3e3;
        border-radius: 5px;
        text-align:center;
        margin-bottom: 20px;
    }
    .bg-light{
        background-color: #eee;
    }
    .source{
        padding: 20px 20px 0;
        min-width: 100% !important;
    }
</style>

## Grid 栅格系统
一行由24列组成，以迅雷之势布局。


### 基础布局
:::demo 配合使用 `row` 和 `col` 组件的 `span` 属性可自由组合布局。
```html
<mc-row>
    <mc-col :span="24"><div class="grid-content"></div></mc-col>
</mc-row>
<mc-row>
    <mc-col :span="12"><div class="grid-content"></div></mc-col>
    <mc-col :span="12"><div class="grid-content bg-light"></div></mc-col>
</mc-row>
<mc-row>
    <mc-col :span="8"><div class="grid-content"></div></mc-col>
    <mc-col :span="8"><div class="grid-content bg-light"></div></mc-col>
    <mc-col :span="8"><div class="grid-content"></div></mc-col>
</mc-row>
<mc-row>
    <mc-col :span="6"><div class="grid-content"></div></mc-col>
    <mc-col :span="6"><div class="grid-content bg-light"></div></mc-col>
    <mc-col :span="6"><div class="grid-content"></div></mc-col>
    <mc-col :span="6"><div class="grid-content bg-light"></div></mc-col>
</mc-row>
<mc-row>
    <mc-col :span="4"><div class="grid-content"></div></mc-col>
    <mc-col :span="4"><div class="grid-content bg-light"></div></mc-col>
    <mc-col :span="4"><div class="grid-content"></div></mc-col>
    <mc-col :span="4"><div class="grid-content bg-light"></div></mc-col>
    <mc-col :span="4"><div class="grid-content"></div></mc-col>
    <mc-col :span="4"><div class="grid-content bg-light"></div></mc-col>
</mc-row>
```
:::


### 分栏间隔
:::demo 在 `Row` 组件上使用 `gutter` 参数来设定间隔。默认值为0
```html
<mc-row :gutter="20">
    <mc-col :span="6"><div class="grid-content"></div></mc-col>
    <mc-col :span="6"><div class="grid-content bg-light"></div></mc-col>
    <mc-col :span="6"><div class="grid-content"></div></mc-col>
    <mc-col :span="6"><div class="grid-content bg-light"></div></mc-col>
</mc-row>

```
:::


### 混合布局
可组合使用 `col` 的 `span` 属性，来完成复杂的布局结构
:::demo
```html
<mc-row :gutter="20">
    <mc-col :span="16"><div class="grid-content"></div></mc-col>
    <mc-col :span="8"><div class="grid-content"></div></mc-col>
</mc-row>
<mc-row :gutter="20">
    <mc-col :span="8"><div class="grid-content"></div></mc-col>
    <mc-col :span="8"><div class="grid-content"></div></mc-col>
    <mc-col :span="4"><div class="grid-content"></div></mc-col>
    <mc-col :span="4"><div class="grid-content"></div></mc-col>
</mc-row>
<mc-row :gutter="20">
    <mc-col :span="4"><div class="grid-content"></div></mc-col>
    <mc-col :span="16"><div class="grid-content"></div></mc-col>
    <mc-col :span="4"><div class="grid-content"></div></mc-col>
</mc-row>
```
:::




### 分栏偏移
:::demo 通过指定`col`的`offset`属性可以指定分栏偏移的栏数。
```html
<mc-row :gutter="20">
    <mc-col :span="6"><div class="grid-content"></div></mc-col>
    <mc-col :span="6" :offset="6"><div class="grid-content"></div></mc-col>
</mc-row>
<mc-row :gutter="20">
    <mc-col :span="6" :offset="6"><div class="grid-content"></div></mc-col>
    <mc-col :span="6" :offset="6"><div class="grid-content"></div></mc-col>
</mc-row>
<mc-row :gutter="20">
    <mc-col :span="8" :offset="2"><div class="grid-content"></div></mc-col>
    <mc-col :span="8" :offset="2"><div class="grid-content"></div></mc-col>
</mc-row>
```
:::



### Row 属性
|参数		|说明		|类型		|可选值		|默认值		|
|-----------|-----------|-----------|-----------|-----------|
|gutter		|栅格间隔		|number		| — 		| 0 		|


<br><br>

### Cow 属性
|参数		|说明		|类型		|可选值		|默认值		|
|-----------|-----------|-----------|-----------|-----------|
|span		|栅格占据的列数|number		| — 		| 24 		|
|offset		|左侧的间隔格数|number		| — 		| 0 		|