Use grid element-ui

        <el-row>
            <el-col class="borderRed" :span="24">
                <div class="grid-content bg-purple height">&nbsp;</div>
            </el-col>
        </el-row>
        <el-row>
            <el-col class="borderRed" :span="12">
                <div class="grid-content bg-purple">&nbsp;</div>
            </el-col>
            <el-col class="borderRed" :span="12">
                <div class="grid-content bg-purple">&nbsp;</div>
            </el-col>
        </el-row>
        <!-- 间隔分栏 gutter指定栏之间的间隔-->
        <el-row :gutter="20">
            <el-col class="borderRed" :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
            <el-col class="borderRed" :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
            <el-col class="borderRed" :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
            <el-col class="borderRed" :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
        </el-row>
        <!-- 偏移 offset指向右的偏移量-->
        <el-row :gutter="20">
            <el-col class="borderRed" :span="12" :offset="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
        </el-row>
        <!-- flex对齐方式 -->
        <el-row type="flex" justify="end">
            <el-col class="borderRed" :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
            <el-col class="borderRed" :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
            <el-col class="borderRed" :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
            <el-col class="borderRed" :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
            <el-col class="borderRed" :span="6"><div class="grid-content bg-purple">&nbsp;</div></el-col>
            <el-col class="borderRed" :span="6"><div class="grid-content bg-purple">&nbsp;</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">&nbsp;</div></el-col>
            <el-col class="borderRed" :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple">&nbsp;</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>
        <!- = "0": GutterEL-Row<->responsive to achieve raster column offset Magical
        >
            <el-col :xs="0" :md="6"><div class="grid-content">&nbsp;</div></el-col>
            <el-col class="borderRed" :xs="24" :md="12"><div class="grid-content bg-purple">&nbsp;</div></el-col>
        </el-row>