# Grid 栅格布局

基于行（Row）和列（Col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来

```js
import { Row, Col } from 'amos-framework';
```

* 采用 Row 创建行
* 将内容放置于 Col 中，并且需要将 Col 作为 Row 的直接元素
* Row 中的 Col 总和超过 24，则会另起一行

## 案例演示

### 基本使用

`Row` 和 `Col` 创建一个基本的栅格系统

---demo
```js
import { Row, Col } from 'amos-framework';

ReactDOM.render((
  <div className="grid-case">
    <Row>
      <Col span={12}>col-12</Col>
      <Col span={12}>col-12</Col>
    </Row>
    <Row>
      <Col span={8}>col-8</Col>
      <Col span={8}>col-8</Col>
      <Col span={8}>col-8</Col>
    </Row>
    <Row>
      <Col span={6}>col-6</Col>
      <Col span={6}>col-6</Col>
      <Col span={6}>col-6</Col>
      <Col span={6}>col-6</Col>
    </Row>
  </div>
), _react_runner_);
```
---demoend

### Flex 布局

Flex 布局基础。

---demo
```js
import { Row, Col } from 'amos-framework';

ReactDOM.render((
  <div className="grid-case">
    <p>子节点 左对齐</p>
    <Row type="flex" justify="start">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
    </Row>

    <p>子节点 中间对齐</p>
    <Row type="flex" justify="center">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
    </Row>

    <p>子节点 右对齐</p>
    <Row type="flex" justify="end">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
    </Row>

    <p>子节点 space-between</p>
    <Row type="flex" justify="space-between">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
    </Row>

    <p>子节点 space-around</p>
    <Row type="flex" justify="space-around">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
    </Row>
  </div>
), _react_runner_);
```
---demoend

### 左右偏移

列偏移。

---demo
```js
import { Row, Col } from 'amos-framework';

ReactDOM.render((
  <div className="grid-case">
    <Row>
      <Col span={8}>col-8</Col>
      <Col span={8} offset={8}>
        col-8
      </Col>
    </Row>
    <Row>
      <Col span={6} offset={6}>
        col-6 col-offset-6
      </Col>
      <Col span={6} offset={6}>
        col-6 col-offset-6
      </Col>
    </Row>
    <Row>
      <Col span={12} offset={6}>
        col-12 col-offset-6
      </Col>
    </Row>
  </div>
), _react_runner_);
```
---demoend

### 栅格排序

通过使用 `push` 和 `pull` 类就可以很容易的改变列（column）的顺序。

---demo
```js
import { Row, Col } from 'amos-framework';

ReactDOM.render((
  <div className="grid-case">
    <Row>
      <Col span={18} push={6}>
        col-18 col-push-6
      </Col>
      <Col span={6} pull={18}>
        col-6 col-pull-18
      </Col>
    </Row>
  </div>
), _react_runner_);
```
---demoend

### 响应式布局

参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设六个响应尺寸：`xs` `sm` `md` `lg` `xl`  `xxl`。

---demo
```js
import { Row, Col } from 'amos-framework';

ReactDOM.render((
  <div className="grid-case">
    <Row>
      <Col xs={2} sm={4} md={6} lg={8} xl={10}>
        Col
      </Col>
      <Col xs={20} sm={16} md={12} lg={8} xl={4}>
        Col
      </Col>
      <Col xs={2} sm={4} md={6} lg={8} xl={10}>
        Col
      </Col>
    </Row>
  </div>
), _react_runner_);
```
---demoend

### 其他属性的响应式

`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` `xl` `xxl` 属性中来使用。

其中 `xs={6}` 相当于 `xs={{ span: 6 }}`。

---demo
```js
import { Row, Col } from 'amos-framework';

ReactDOM.render((
  <div className="grid-case">
    <Row>
      <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
        Col
      </Col>
      <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>
        Col
      </Col>
      <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
        Col
      </Col>
    </Row>
  </div>
), _react_runner_);
```
---demoend

### GridPlate 基本使用

`Row` 和 `Col` 创建一个基本的栅格系统

---demo
```js
import { GridPlate } from 'amos-framework';

ReactDOM.render((
  <div className="grid-case">
    <GridPlate rows={2} cols={5} showTip />
    <GridPlate rows={3} cols={4} showTip />
    <GridPlate rows={3} cols={5} showTip />
    <GridPlate rows={3} cols={6} showTip />
  </div>
), _react_runner_);
```
---demoend

### GridPlate 结合 TagSelect 使用

`Row` 和 `Col` 创建一个基本的栅格系统

---demo
```js
import { GridPlate, TagSelect } from 'amos-framework';

const Option = TagSelect.Option;

const plates = [
  '2*5',
  '3*4',
  '3*5',
  '3*6'
];

const handleFormSubmit = (value) => {
  console.log(value);
}

ReactDOM.render((
  <div className="grid-case">
    <TagSelect onChange={handleFormSubmit} expandable={false} single iconable>
      {
        plates.map(p => {
          const [rows, cols] = p.split('*').map(i => parseInt(i));
          return (
            <Option key={p} value={p} style={{ height: 'auto' }}>
              <GridPlate rows={rows} cols={cols} showTip />
            </Option>
          );
        })
      }
    </TagSelect>
  </div>
), _react_runner_);
```
---demoend

## Props

### Row

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-row` | 自定义样式前缀 |
| className | string | - | 自定义样式名 |
| style | object | - | 自定义样式 |
| type | string | - | 布局模式，可选 `flex`，支持 flex 布局的浏览器下有效 |
| justify | string | `start` | flex 布局下的水平排列方式：`start end center space-around space-between` |
| align | string | `top` | flex 布局下的垂直对齐方式：`top middle bottom` |
| gutter | number | 0 | 栅格间隔间距 |

> 设置 gutter 结果

会给 Row 节点的 div 添加样式 `{ marginLeft: gutter / -2, marginRight: gutter / -2 }`，外部可以添加 `style: { margin: 0 }` 来覆盖默认注入的样式。

会给 Col 节点的 div 添加样式 `{ paddingLeft: gutter / 2, paddingRight: gutter / 2 }`, 外部可以通过给Col 设置 style 来覆盖默认样式。

### Col

| params   |type     |default    | description |
|--------- |-------- |---------- |-------- |
| prefixCls | string | `amos-col` | 自定义样式前缀 |
| className | string | - | 自定义样式名 |
| offset | `string or number` | 0 | 栅格左侧的间隔格数，间隔内不可以有栅格 |
| order | `string or number` | 0 | 栅格顺序，flex 布局模式下有效 |
| pull | `string or number` | 0 | 栅格向左移动格数 |
| push | `string or number` | 0 | 栅格向右移动格数 |
| span | `string or number` | - | 栅格占位格数，为 0 时相当于 display: none |
| xs | `number or object` | - | `<576px` 当小于 576px 时，起效 |
| sm | `number or object` | - | `≥576px` 当大于等于 576px 时，起效 |
| md | `number or object` | - | `≥768px` 当大于等于 768px 时，起效 |
| lg | `number or object` | - | `≥992px` 当大于等于 992px 时，起效 |
| xl | `number or object` | - | `≥1200px` 当大于等于 1200px 时，起效 |
| xxl | `number or object` | - | `≥1600px` 当大于等于 1600px 时，起效 |

> `xs、sm、md、lg、xl、xxl` 响应式栅格，可为栅格数或一个包含其它属性的对象

## 附录

.grid-case 样式

```scss
.grid-case {
  div[class*='amos-col'] {
    padding: 1em;
    margin: 0.5em 0;
    background: #345fa6;

    &:nth-child(2n + 1) {
      background: rgba(#345fa6, 0.5);
    }
  }
}
```