<template>
<div class="grid">
<slot></slot>
</div>
</template>
<style lang="scss" src="./style.scss"></style>
<script type="text/javascript">
/**
* @component Grid
* @description
*
* ## 栅格系统 / Grid组件
*
* ### 简要
*
* 栅格系统类似于 **Bootstrap's grid system**, 其本质是基于flex布局.
*
* Vimo的栅格由**Grid/Row/Column**三个组件组成, Grid定义外部flex容器, Row定义行, Column定义列. 栅格系统的默认列为12行. 当然, 以上都是可以通过修改Scss文件定制的, 但是这么做的人应该很少.
*
* > 注意: 如果不了解Bootstrap和Flexbox请再恶补相关的知识.
*
* ### Grid/Row/Colume组件属性
*
* 下列属性写在组件标签中即可生效, 名称及含义与flex相似, 具体请看右边示例:
*
* - Grid属性:
* - [no-padding]: 子元素除去全部padding
* - [sudoku]: 九宫格
*
* - Row属性:
* - [nowrap]
* - [wrap-reverse]
* - [align-items-start]
* - [align-items-center]
* - [align-items-end]
* - [align-items-stretch]
* - [align-items-baseline]
* - [justify-content-start]
* - [justify-content-center]
* - [justify-content-end]
* - [justify-content-around]
* - [justify-content-between]
*
* - Column属性:
* - [align-self-start]
* - [align-self-end]
* - [align-self-center]
* - [align-self-stretch]
* - [align-self-baseline]
*
*
* ### 响应式Column属性
*
* - 断点位置(breakpoint):
* - xs: 0
* - sm: 576px
* - md: 768px
* - lg: 992px
* - xl: 1200px
*
* - 使用方法:
* - [col-${breakpoint}-${i}]
* - [offset-${breakpoint}-${i}]: 定义属性margin-left
* - [pull-${breakpoint}-${i}]: 定义属性right
* - [push-${breakpoint}-${i}]: 定义属性left
*
* ### 如何引入
*
* ```
* // 引入
* import { Column, Grid, Row } from 'vimo'
* // 安装
* Vue.component(Grid.name, Grid)
* Vue.component(Row.name, Row)
* Vue.component(Column.name, Column)
* ```
*
* @demo #/grid
* @usage
* <Grid no-padding>
* <Row justify-content-center align-items-center>
* <Column pull-sm-4>
* 1 of 3
* </Column>
* <Column>
* 2 of 3
* </Column>
* <Column>
* 3 of 3
* </Column>
* </Row>
* </Grid>
* */
export default {
name: 'Grid'
}
</script>