elcard（el-card多个卡片布局）

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的时候写成百分比的形式 
 
  
 
  
 
  
 
  
 
  
 
 。