<el-row> <el-col class="borderRed" :span="24"> <div class="grid-content bg-purple height"> </div> </el-col> </el-row> <el-row> <el-col class="borderRed" :span="12"> <div class="grid-content bg-purple"> </div> </el-col> <el-col class="borderRed" :span="12"> <div class="grid-content bg-purple"> </div> </el-col> </el-row> <!-- 间隔分栏 gutter指定栏之间的间隔--> <el-row :gutter="20"> <el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col> <el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col> <el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col> <el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col> </el-row> <!-- 偏移 offset指向右的偏移量--> <el-row :gutter="20"> <el-col class="borderRed" :span="12" :offset="6"><div class="grid-content bg-purple"> </div></el-col> </el-row> <!-- flex对齐方式 --> <el-row type="flex" justify="end"> <el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col> <el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col> <el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col> </el-row> <el-row type="flex" justify="space-between"> <el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col> <el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col> <el-col class="borderRed" :span="6"><div class="grid-content bg-purple"> </div></el-col> </el-row> <!-- 响应式布局 xs sm md lg xl--> <el-row :gutter="10"> <el-col class="borderRed" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"> </div></el-col> <el-col class="borderRed" :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"> </div></el-col> <el-col class="borderRed" :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"> </div></el-col> <el-col class="borderRed" :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"> </div></el-col> </el-row> <!-- 响应式 用栅格实现列偏移的妙用 --> <el-row :gutter="0"> <el-col :xs="0" :md="6"><div class="grid-content"> </div></el-col> <el-col class="borderRed" :xs="24" :md="12"><div class="grid-content bg-purple"> </div></el-col> </el-row>
element-ui栅格的使用
猜你喜欢
转载自www.cnblogs.com/fqh123/p/10988203.html
今日推荐
周排行