# row/col 组件

按照栅格化布局思路，再加上响应式布局的特性，提供了 row/col 两个基础布局组件，用来帮助开发者快速适配多屏应用。

核心概念是将整个屏幕宽度分为 **24** 单位，每个单位的大小，由当前屏幕尺寸决定的。例如 375px 的屏幕宽度，那么 1 unit = 375/24 px.

## 使用方法

1. npm 安装

```
npm i @miniprogram-component-plus/col --save
npm i @miniprogram-component-plus/row --save
```

2. 开发者工具构建 npm，勾选“使用 npm 模块”，参考 [npm 支持](/miniprogram/dev/devtools/npm.md)

3. 页面 json 文件中加入 usingComponents 字段
```
{
  "usingComponents": {
    "mp-col": "@miniprogram-component-plus/col",
    "mp-row": "@miniprogram-component-plus/row"
  }
}
```

4. 在页面中使用组件

```html
<view class="page__desc">三列均分布局</view>
    <view>
        <mp-row>
          <mp-col span="{{8}}">
            <view>
              <view class="col">
              </view>
            </view>
          </mp-col>
          <mp-col span="{{8}}">
            <view>
              <view class="col">
              </view>
            </view>
          </mp-col>
          <mp-col span="{{8}}">
            <view>
              <view class="col">
              </view>
            </view>
          </mp-col>
        </mp-row>
</view>
```

## row 组件属性

默认无

## col 组件属性

| 属性             | 类型        | 默认值  | 必填 | 说明                             |
| ---------------- | ----------- | ------- | ---- | -------------------------------- |
| span           | number      |    24     | 否   | 当前 col 所占屏幕宽度的份数|
| offset           | number      | 0     | 否   | 距 row 左侧偏移margin 距离|
| push           | number      | 0     | 否   | 距左侧偏移的单位距离|
| pull           | number      | 0     | 否   | 距右侧偏移的单位距离|
| xs           | `number, Object<span,offset, push, pull>`     |      | 否   | 当屏幕 `< 768px` 时，对应显示的网格规则。例如 `xs="{{2}}" 或 xs="{{ {span:24, offset: 0} }}"`|
| sm           | `number, Object<span,offset, push, pull>`      |      | 否   | 当屏幕 `>= 768px, <992px`，对应显示的网格规则。|
| md           | `number, Object<span,offset, push, pull>`      |      | 否   | 当屏幕 `>= 992px, <1200px`，对应显示的网格规则。|
| lg           | `number, Object<span,offset, push, pull>`      |      | 否   | 当屏幕 `>= 1200px, <1920px` 时，对应显示的网格规则。|
| xl           | `number, Object<span,offset, push, pull>`      |      | 否   | 当屏幕 `>= 1920px` 时，对应显示的网格规则。|

Tips:
* 同时设置 span 和 响应式属性时，当屏幕超过响应式属性范围时，会使用 span 属性。