通过Col组件的：span属性调整Layout布局，分为24栏。
1
2
3
el-row>
  <el-col ：span=ൠ"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
2、分栏间隔
通过Row组件的：gutter属性来调整布局之间的宽度
1
2
3
4
<el-row ：gutter=൜">
  <el-col ：span=Ś"><div class="grid-content bg-purple"></div></el-col>
  <el-col ：span=Ś"><div class="grid-content bg-purple"></div></el-col>
</el-row>
3、分栏漂移
通过Col组件的：offset属性调整栅格的偏移位置（每次1格/24格）。
1
2
3
4
<el-row ：gutter=൜">
  <el-col ：span=Ś" ：offset=Ś"><div class="grid-content bg-purple"></div></el-col>
  <el-col ：span=Ś" ：offset=Ś"><div class="grid-content bg-purple"></div></el-col>
</el-row>
4、对齐方式
通过Row组件的type="flex"启动flex布局，再通过Row组件的justify属性调整排版方式，属性值分别有
start 居前（默认）
center 居中
end 居后
space-between 分布自适应（两边–中间，两边没有空隙）
around （中间–两边，两边会有空隙）
1
2
3
4
<el-row type="flex" class="row-bg" justify="center">
  <el-col ：span=Ś"><div class="grid-content bg-purple"></div></el-col>
  <el-col ：span=Ś"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
5、响应式布局
参考bootstrap的响应式，预设四个尺寸
xs <768px
sm ≥768px
md ≥992
lg ≥1200
1
2
3
4
5
6
<el-row ：gutter=൒">
  <el-col ：xs=Ŝ" ：sm=Ś" ：md=Ř" ：lg=ŗ"><div class="grid-content bg-purple"></div></el-col>
  <el-col ：xs=Ř" ：sm=Ś" ：md=Ŝ" ：lg=ŝ"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col ：xs=Ř" ：sm=Ś" ：md=Ŝ" ：lg=ŝ"><div class="grid-content bg-purple"></div></el-col>
  <el-col ：xs=Ŝ" ：sm=Ś" ：md=Ř" ：lg=ŗ"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
ICON图标
今后可以使用<i>来做图标，给其class添加el-icon-iconName即可。 
可以在<button>上添加icon属性。