@include 'common'
## 基础布局
通过 Col 的 span 属性指定该列宽度占整行宽度24分之几或5分之几。
@include 'demo1'
## 固定宽度列
通过 Col 的 fixedSpan 属性来指定某列为固定宽度列，其宽度的计算方式为 20 * fixedSpan。
@include 'demo2'
## 列间距离
列与列间距默认为0，可以通过设置 Row 的 gutter 属性来改变列间距。
@include 'demo3'
## 溢出后是否换行
（不支持 IE9 浏览器）默认列在行中宽度溢出后不会换行，如果想自动换行，请为 Row 设置 wrap 为 true。
@include 'demo4'
## 嵌套布局
Col 下也可嵌套 Row，以完成更细致的布局
@include 'demo5'
## 响应式布局
@include 'demo6'
## 显示与隐藏
提供了强大的响应式的显示与隐藏功能，支持在不同断点下的显示与隐藏。
@include 'demo7'
## 设置行的宽度
默认 Row 的宽度被设置为100%，可以通过设置 fixed 属性为 true，来让 Row 的宽度不立刻随着是视口大小变动而变动，而是在某个断点下维持固定的宽度，也可以通过设置 fixedWidth 属性为某一断点值，从而固定 Row 的宽度，不再随着视口大小变动而变动。
@include 'demo8'
## 偏移
（不支持 IE9 浏览器）列可以向右偏移一定距离，该距离的计算方式和列所占宽度计算方式相同。
@include 'demo9'
## 固定宽度偏移
（不支持 IE9 浏览器）列可以向右偏移一定距离，该距离的计算方式和固定宽度列的宽度相同。
@include 'demo10'
## 多列垂直方向对齐方式
（不支持 IE9 浏览器）基于 Flex 的 align-items 和 align-self 属性实现，在 Row 上设置 align 属性，即可控制 Row 下面所有 Col 的垂直方向对齐方式：top（顶部对齐，默认），center（居中对齐），bottom（底部对齐），baseline（第一行文字的基线对齐），stretch（如果未设置高度或设为 auto，将占满整个容器的高度）；在 Col 上设置 align 属性，可允许它与其它列不一样的对齐方式，覆盖 Row 的 align 属性。
@include 'demo11'
## 多列水平方向对齐方式
（不支持 IE9 浏览器）基于 Flex 的 justify-content 属性实现，在 Row 上设置 justify 属性，即可行内多列水平方向对齐方式：start（左对齐，默认），center（居中对齐），end（右对齐），space-between（两端对齐，项目之间的间隔都相），space-around（两侧的间隔相等，列之间的间隔比列与左右两端的间隔大一倍）。
@include 'demo12'
## 自定义元素渲染类型
使用 component 来指定需要渲染的元素类型，默认为 div
@include 'demo13'
## 无障碍键盘操作指南
默认 <Row> 和 <Col> 会加上 role="row" 和 role="gridcell", 但是为了完美的无障碍实现, 开发者还应该在外部容器加上 role="grid"。
@include 'demo14'