el-card多个卡片布局
Row Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| gutter | 栅格间隔 | number | — | 0 |
Col Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| span | 栅格占据的列数 | number | — | 24 |
<el-row :gutter="20">
<el-col :span="16"><el-card></el-card>
<el-row :gutter="16" style="margin-top:10px;">
<el-col :span="12"><el-card style="height: 200px"></el-card></el-col>
<el-col :span="12"><el-card style="height: 200px"></el-card></el-col>
</el-row>
</el-col>
<el-col :span="8">
<el-card></el-card>
<el-card style="margin-top:10px;height: 200px"></el-card>
</el-col>
</el-row>
//gutter指定列与列之间的间距，span指定占据的列数
//这样写width自适应屏幕不用指定，只需指定span就可以调节相应width。
//height需要指定
//位于同一列的多个card依次往下排列，同列的行与行之间使用margin进行调节
效果如下：
注意：
这样写width是根据屏幕自适应调节的，所以后面加其他内容需要指定width的时候写成百分比的形式。