ElementUI 组件：Layout布局（el-row、el-col）

ElementUI的Layout布局组件<el-row>和<el-col>用于创建一个栅格系统，以便在页面布局中更好地控制列的宽度和分布。

以下是使用ElementUI的Layout组件的基本示例：

<template>
  <el-row>
    <el-col :span="24"><div class="grid-content bg-purple-dark">24</div></el-col>
  </el-row>
  <el-row>
    <el-col :span="12"><div class="grid-content bg-purple">12</div></el-col>
    <el-col :span="12"><div class="grid-content bg-purple-light">12</div></el-col>
  </el-row>
  <el-row>
    <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col>
    <el-col :span="8"><div class="grid-content bg-purple-light">8</div></el-col>
    <el-col :span="8"><div class="grid-content bg-purple">8</div></el-col>
  </el-row>
</template>
 
<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

在这个例子中，<el-row> 表示一行，而 <el-col> 表示一列。:span 属性用于定义每个列占用的网格数量。以上代码将创建三行，每行包含不同数量的列，列的宽度会根据所设置的span值自适应。