1. 基础布局：通过col组件的:span属性调整layout布局，分为24栏
el-col 的span默认为24栏
<el-row>
<el-col :span="24"></el-col>
</el-row>
2. 分栏间隔：通过row组件的:gutter属性来调整布局之间的宽度；
<el-row :gutter="20">
<el-col :span="6"></el-col>
<el-col :span="6"></el-col>
</el-row>
3. 分栏漂移：通过col的:offset属性调整栅格的偏移位置(每次一格/24格)
<el-row :gutter="20">
<el-col :span="6" :offset="6"></el-col>
<el-col :span="6" :offset="6"></el-col>
</el-row>
4.对齐方式：通过row组件的type="flex"启动flex布局，再通过row组件的juatify属性调整排版方式，属性值有以下几种：
start 居前(默认)
center 居中
end 居后
space-between 分布自适应(两边-中间，两边没有空隙)
around (中间-两边，两边会有空隙)
<el-row type="flex" class="row-bg" justify="center">
<el-col :span="6"></el-col>
<el-col :span="6"></el-col>
</el-row>
5. 响应式布局：参考bootstrap的响应式，预设四个尺寸：
xs < 768px
sm >768 px
md >992 px
lg >1200 px
<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3"></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3"></div></el-col>
</el-row>