Vue -- element-ui 关于<el-row><el-col>布局

我们可以通过分块来进行布局：

例如实现以下的布局(两边可增加样式进行调整)：

 Vue 代码：

<template>
  <el-container>
  <el-header>
    header
  </el-header>
  <el-main>
    <el-row>
      <el-col :span="24">   <!--占整行-->
        <el-row>
          <el-col :span="4" style="background-color: coral;">
1
          </el-col>
          <el-col :span="16" style="background-color: #42b983; border: 1px solid black;">
            <el-row>
              <el-col style="background-color: red;">
1
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8" style="background-color: antiquewhite">
1
              </el-col>
              <el-col :span="8" style="background-color: brown;">
1
              </el-col>
              <el-col :span="8" style="background-color: mintcream">
1
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="4" style="background-color: #4a5cff;">
1
          </el-col>

        </el-row>
      </el-col>
    </el-row>
  </el-main>
  </el-container>
</template>

<script>
    export default {
        name: "test1"
    }
</script>

<style scoped>

</style>