# Layout Grid 栅格布局

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/layout-grid/freepass)
- 平台：PC
- 维护者：揭志胜
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[LayoutGrid]

## 代码演示

### 基础栅格

使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。

```jsx
import { Component } from "react";
import { constants, Layout } from '@weapp/ui';

const { Row, Col } = Layout;

const prefixCls = `${constants.uiPcClsPrefix}-demo-layout-grid`;

class GridDemo extends Component {
  render() {
    return (
      <div className={prefixCls}>
        <h2>基础栅格</h2>
        <p>使用单一的一组 Row 和 Col 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 Row 内。</p>
        <Row>
          <Col span={24}>col</Col>
        </Row>
        <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>
    );
  }
}

export default GridDemo;
```

### 左右偏移

Col栅格组件通过offset,order,push,pull控制栅格位置。

```jsx
import { Component } from "react";
import { constants, Layout } from '@weapp/ui';

const { Row, Col } = Layout;

const prefixCls = `${constants.uiPcClsPrefix}-demo-layout-grid`;

class GridDemo extends Component {
  render() {
    return (
      <div className={prefixCls}>
        <h3>基础栅格</h3>
        <h4>栅格间隔</h4>
        <Row >
            <Col span={4} offset={4}>col-4,左偏4</Col>
            <Col span={4}>col-2</Col>
        </Row>
        <h4>栅格左移,左偏4，左移2(实际左偏移2)</h4>
        <Row>
            <Col span={4} offset={4} pull={2}>col-4</Col>
        </Row>
        <h4>栅格右移,左偏4，右移2(实际右偏移6)</h4>
        <Row>
            <Col span={4} offset={4} push={2}>col-4</Col>
        </Row>
        <h4>栅格顺序(order)</h4>
        <Row>
            <Col span={4} order={3}>代码块1</Col>
            <Col span={4} order={2}>代码块2</Col>
            <Col span={4} order={1}>代码块3</Col>
        </Row>
      </div>
    );
  }
}

export default GridDemo;
```

### 左右偏移

Col栅格组件通过offset,order,push,pull控制栅格位置。

```jsx
import { Component } from "react";
import { constants, Layout } from '@weapp/ui';

const { Row, Col } = Layout;

const prefixCls = `${constants.uiPcClsPrefix}-demo-layout-grid`;

class GridDemo extends Component {
  render() {
    return (
      <div className={prefixCls}>
        <h3>基础栅格</h3>
        <h4>栅格间隔</h4>
        <Row >
            <Col span={4} offset={4}>col-4,左偏4</Col>
            <Col span={4}>col-2</Col>
        </Row>
        <h4>栅格左移,左偏4，左移2(实际左偏移2)</h4>
        <Row>
            <Col span={4} offset={4} pull={2}>col-4</Col>
        </Row>
        <h4>栅格右移,左偏4，右移2(实际右偏移6)</h4>
        <Row>
            <Col span={4} offset={4} push={2}>col-4</Col>
        </Row>
        <h4>栅格顺序(order)</h4>
        <Row>
            <Col span={4} order={3}>代码块1</Col>
            <Col span={4} order={2}>代码块2</Col>
            <Col span={4} order={1}>代码块3</Col>
        </Row>
      </div>
    );
  }
}

export default GridDemo;
```

## API

### 参数说明如下：

#### 子组件 Layout.Row

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| gutter | 栅格间隔，可以写成像素值或者使用数组形式同时设置?水平间距, 垂直间距 | `number` \| `[number, number]` | 否 | - |
| align | 垂直对齐方式 | `top`\|`middle`\|`bottom` | 否 | - |
| justify | 水平排列方式 | `start`\|`end`\|`center`\|`space-around`\|`space-between` | 否 | - |
| wrap | 是否自动换行 | `boolean` | 否 | - |
#### 子组件 Layout.Col

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| flex | flex 布局属性 | string \| number | 否 | - |
| span | 栅格占位格数，为 0 时相当于 display: none | number \| string | 否 | - |
| order | 栅格顺序 | number \| string | 否 | - |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number \| string | 否 | - |
| push | 栅格向右移动格数 | number \| string | 否 | - |
| pull | 栅格向做移动格数 | number \| string | 否 | - |
