# src/Grid.js File

    import React,{ PropTypes } from 'react';
    import Component from './utils/Component';
    import classnames from 'classnames';
    import {setPhoenixPrefix} from './utils/Tool';

    /**
     * <h5>主要栅格化布局组件</h5>
     * <strong><a href='../classes/Grid.html'>Grid 外框</a></strong><br>
     * <strong><a href='../classes/Row.html'>Row 行排列</a></strong><br>
     * <strong><a href='../classes/Col.html'>Col 竖排列</a></strong><br>
     * <strong><a href='../classes/TableView.html'>TableView 仿表格组件</a></strong><br>
     * <h6>点击以上链接进行相关查看</h6>
     * @module 布局组件
     * @main 布局组件
     * @static
     */
    /**
     * 栅格容器组件<br/>
     * - 配合Row、Col使用布局。
     * - 可自定义className、style等属性以及自定义事件。
     *
     * 示例:
     * ```code
     *     <Grid> //定义栅格
     *         <Row> //定义一行
     *             <Col> //定义一列，最多12份
     *                 <div className='col-demo'>内容</div>
     *             </Col>
     *             <Col>
     *                 <div className='col-demo'>stretch<br />baseline</div>
     *             </Col>
     *         </Row>
     *     </Grid>
     * ```
     *
     * @class Grid
     * @module 布局组件
     * @extends Component
     * @constructor
     * @since 0.1.0
     * @demo grid|grid.js {展示}
     * @show true
     * */
    export default class Grid extends Component{

        static propTypes = {
            /**
             * 样式前缀
             * @property classPrefix
             * @type String
             * @default 'grid'
             * */
            classPrefix: PropTypes.string,
        };

        static defaultProps = {
            classPrefix:'grid',
            classMapping : {}
        };

        constructor(props, context) {
            super(props, context);
        }

        render(){
            return (
                <div {...this.props}
                    className={classnames(
                        this.getProperty(true),
                        this.props.fluid ? setPhoenixPrefix('grid-fluid'):'',
                        this.props.className
                )}>
                    {this.props.children}
                </div>
            );
        }
    }