<el-row :gutter="10">
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
詳解
其實就是做了每行總共24個柵格，在不同尺寸的頁面上如何分配寬度比例：
| 名稱 | 尺寸 |
|---|---|
| xs（最小號 ） | <768px |
| sm（小號） | ≥768px |
| md（中號） | ≥992px |
| lg（大號） | ≥1200px |
| xl（更大號） | ≥1920px |
比如這里直接給xs賦值4，他的寬度在xs（<768px，手機）就是4/24。
除了直接給賦值數字，也可以給對象如：{span:18,offset:3}。
span即是僅賦值數值時的默認參數位，為寬度。
offset為從左邊的偏移量，也是1/24為單位。
示例
立刻搞定之前想要的效果：寬屏頁面時內容僅僅占頁面寬50%居中顯示。窄屏幕時占70%，手機時占100%。
<el-row :gutter="10"> //gutter就是各col之間的間距。
<el-col :xs="{span:24,offset:0}" :sm="{span:16,offset:4}" :md="{span:12,offset:6}">
</el-col>
</el-row>