前言
這是element-plus提供的響應式布局組件。可以非常方便的實現響應式布局以及快速按比例分塊。
例如實現下面的效果：
第一行：寬度占100%
第二行：寬度1：1
第三行：1：1：1
第四行：1：1：1：1
第五行：1：1：1：1：1：1
這里文檔給的例子都是等比例平分。實際上，你想怎么分都可以。例如1：2：1。
基礎功能
就是前言里面這個例子。
代碼非常的多，我們拿前面兩個舉例。默認情況下，每一行被分成24塊。可以根據比例調節每個el-col的span的數量來實現按比例分配。
<el-row><el-col :span="24"><div class="grid-content ep-bg-purple-dark" /></el-col></el-row><el-row><el-col :span="12"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="12"><div class="grid-content ep-bg-purple-light" /></el-col></el-row>
這里需要注意的是ep-bg-purple這樣的顏色是偽代碼，并沒有實現，需要自己實現顏色。這是文檔寫的不好的地方。
<style>
// 通過.el-row直接控制屬性
.el-row {margin-bottom: 20px;
}.el-row:last-child {margin-bottom: 0;
}.el-col {border-radius: 4px;
}.grid-content {border-radius: 4px;// 寬度可以動態計算，只需要設置高度就行min-height: 36px;
}
// 顏色需要自己寫
.ep-bg-purple {background-color: #d1d2d3;
}.ep-bg-purple-dark {background-color: #99a9bf;
}.ep-bg-purple-light {background-color: #d3dce6;
}
</style>
關于span參數
默認情況下，每一行被分成24塊。我們可以通過設置el-col的span參數來使所有el-col的span參數的總和等于24。
- 總和可以小于24，例如6：12，剩下的部分留白。
- 總和可以大于24，超出的部分自帶換行。
24這個值是固定的，不可以隨便改，雖然你可以通過修改源碼的方式修改這個值，但是不建議這樣做。
那么這就引出一個關鍵問題——為什么默認值是24？
主要原因是柵格化系統來源于紙張排版系統。24可以排成1/1，1/2，1/3，1/4，1/6，1/8，1/12。也就是1，2，3，4，6，8，12等分。一般情況下，我們就用到2，3等分比較多。
如果你想要5等分，可以利用小于24留白的技巧。4：4：4：4：4就可以實現平均分成5分。空白的地方想辦法居中使之左右平攤。這個通過el-row的justify屬性就可以實現居中。
小于24的情況：12：6
右邊留白。
超過24的情況：12：16
超過的那個元素直接移到第二行。
分欄間隔gutter
通過gutter這個屬性可以實現元素之間的間距。只有一個的時候gutter無效。兩個或者以上，就是下圖的效果，最左邊和最右邊是沒有空白的。
<el-row :gutter="20"><el-col :span="24"><div class="grid-content ep-bg-purple-dark"></div></el-col></el-row><el-row :gutter="20"><el-col :span="12"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="12"><div class="grid-content ep-bg-purple-light" /></el-col></el-row><el-row :gutter="20"><el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="8"><div class="grid-content ep-bg-purple-light" /></el-col><el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col></el-row>
混合布局
沒什么好說的，自己控制比例實現布局。
<el-row :gutter="20"><el-col :span="16"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col></el-row><el-row :gutter="20"><el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col></el-row><el-row :gutter="20"><el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="16"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col></el-row>
列偏移
這個還是有點用處的。比如我就是想實現偏移幾個位置后繪制，特定場景還是比較實用的。
<el-row :gutter="20"><el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="6" :offset="6"><div class="grid-content ep-bg-purple" /></el-col></el-row><el-row :gutter="20"><el-col :span="6" :offset="6"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="6" :offset="6"><div class="grid-content ep-bg-purple" /></el-col></el-row><el-row :gutter="20"><el-col :span="12" :offset="6"><div class="grid-content ep-bg-purple" /></el-col></el-row>
對齊方式
這個和flex的對其方式是非常類似的，主要的區別可能就是在element-plus里面有響應式，有柵格化系統的概念。使用起來是沒什么區別的。
可以利用這個特性和留白的特性，實現5等分。也就是4:4:4:4:4,并且居中，這樣就巧妙的實現了五等分的效果。
我們知道將24進行5等分是不可能的，但是可以通過這個技巧實現。
<el-row justify="space-between"><el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col><el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col><el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col><el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col></el-row>
響應式布局
這個是非常重要的一個功能，也是實現響應式的主要功能。 但是效果不好演示，需要自己瀏覽器調試看下效果，也非常的簡單。
參照了 Bootstrap 的 響應式設計，預設了五個響應尺寸：xs、sm、md、lg 和 xl。
主要就是下面這幾個屬性：
下面的代碼在瀏覽器的不同分辨率下，會動態的改變元素占用的比例。可以打開控制臺拖動分辨率來查看效果。
<el-row :gutter="10"><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content ep-bg-purple" /></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content ep-bg-purple-light" /></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content ep-bg-purple" /></el-col><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content ep-bg-purple-light" /></el-col></el-row>
