ElementUI之Layout布局
基础布局
整个宽度分为24份,通过span属性来定义元素的宽度占多少
<el-row> <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col> <el-col :span="12"><div class="grid-content bg-purple-dark"></div></el-col> </el-row>
分栏间隔
通过row组件提供的gutter属性来指定每一栏之间的间隔,默认间隔为0
<el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> <el-col :span="6"><div class="grid-content bg-purple"></div></el-col> </el-row>
混合布局
通过基础的1/24分栏任意扩展组合形成为复杂的混合布局
<el-row :gutter="20"> <el-col :span="16"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> </el-row> <el-row :gutter="20"> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="8"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> <el-col :span="4"><div class="grid-content bg-purple"></div></el-col> </el-row> <