Layout 布局（基础、响应式布局）

1、基础布局

使用单一分栏创建基础的栅格布局

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

<el-row> 
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> 
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col> 
</el-row>

2、分栏间隔

分栏之间存在间隔

Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0

<el-row :gutter="20"> 
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> 
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col> 
</el-row>

3、混合布局

通过基础的1/24 分栏任意扩展组合形成较为复杂的混合布局

<el-row :gutter="20"> 
   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> 
   <el-col :span="16"><div class="grid-content bg-purple"></div></el-col> 
   <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> 
</el-row>

4、分栏偏移

支持偏移指定的栏数

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数

<el-row :gutter="20">  
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> 
   <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col> 
</el-row>

5、对齐方式

通过 flex 布局来对分栏进行灵活的对齐

<el-row :gutter="10">
    <el-col :xs="0" :sm="7" :md="6" :lg="5" :xl="5"></el-col>
    <el-col :xs="24" :sm="17" :md="12" :lg="14" :xl="14"></el-col>
    <el-col :xs="0" :sm="0" :md="6" :lg="5" :xl="5"></el-col>
</el-row>

<el-row type="flex" class="row-bg" justify="space-between"> 
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> 
   <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col> 
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> 
</el-row>

6、响应式布局

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl

1. xl对应屏幕 >=1920 px 超大显示器
2. lg对应屏幕>=1200px，小于 1920px 台式1920*1080显示器
3. md对应屏幕>=992px，小于1200px 适合笔记本
4. sm对应屏幕>=768px，小于992px 适合平板
5. xs对应屏幕<=768 手机端屏幕

例如有如下代码将屏幕分成3列，进行响应式布局

• 当屏幕的大小变成手机般大小（屏幕宽度<768px）时只显示xs=24的布局，
• 768px到992px时显示sm=7和sm=17的两列，并且按照7:17显示
• 992px到1200px时显示3列按照md=6、md=12和md=6比例显示
• 1200px到1920px时按照lg=5、lg=14和lg=5比例显示