本文仅供参考：

首先你要掌握的基础知识:

row 行概念

col 列概念

col组件的:span属性的布局调整,一共分为24栏:

代码示例:

1 
2   "24">
class="grid-content">
3  

效果展示:

 代码示例：

1 
2   "12">
class="grid-content">
3 

效果展示:

 row组件的:gutter属性来调整布局之间的宽度---分栏间隔

代码示例:

1 "20">
2   "6">
class="grid-content bg-purple">
3   "6">
class="grid-content bg-purple">
4 

效果:

 Col组件的:offset属性调整方块的偏移位置（每次1格/24格）

1 "20">
2   "6" :offset="6">
class="grid-content">
3   "6" :offset="6">
class="grid-content">
4 

效果:

对齐方式:

row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:

1. justify=center 居中对齐
2. justify=start 左对齐
3. justify=end 右对齐
4. justify=space-between 空格间距在中间对齐
5. justify=space-around 左右各占半格空格对齐

1 "flex" class="row-bg" justify="center">
2    "6">
class="grid-content">
3  

效果:

 响应式布局:

参考bootstrap的响应式，预设四个尺寸

1. xs <768px
2. sm ≥768px
3. md ≥992
4. lg ≥120

使用方式:

1 "10">
2   "8" :sm="6" :md="4" :lg="3">
class="grid-content bg-purple">
3   "4" :sm="6" :md="8" :lg="9">
class="grid-content bg-purple-light">
4   "4" :sm="6" :md="8" :lg="9">
class="grid-content bg-purple">
5   "8" :sm="6" :md="4" :lg="3">
class="grid-content bg-purple-light">
6 

练习示例:

1         class="field-label">方块选择:
2         
3           <select v-model="selected" @change="selectbj(selected)">
4             for="option in layouts" :value="option.value">
5                 {{ option.name }}
6             
7           select>

data默认初始化数据:

1       selected: 0,
2       layouts: [
3         { 'name': '1x1模式', 'value': '0' },
4         { 'name': '2x1模式', 'value': '1' },
5         { 'name': '2x2模式', 'value': '2' },
6         { 'name': '3x2模式', 'value': '3' },
7         { 'name': '3x3模式', 'value': '4' },
8         { 'name': '1+5模式', 'value': '5' }
9       ],

布局代码:

    "selected" >
      
class="block" style="height:400px">
            
            
"height:100%;width:100%" v-if="selected==0">
            
                "10" type="flex" class="grid-one-contentheight" justify="center">
                  "24">
                
            
            
            
"height:100%;width:100%" v-else-if="selected==1">
                "10" type="flex" class="row-bg el-row-two" justify="space-between">
                  "12">
class="grid-content ">
                  "12">
class="grid-content ">
                
            
            
            
"height:100%;width:100%" v-else-if="selected==2">
              "10" type="flex" class="row-bg" justify="center">
                  "12">
class="grid-content ">
                  "12">
class="grid-content ">
                
                

                "10" type="flex" class="row-bg" justify="center">
                  "12">
class="grid-content ">
                  "12">
class="grid-content ">
                
            
            
            
"height:100%;width:100%" v-else-if="selected==3">
              "10" type="flex" class="row-bg" justify="center">
                  "12">
class="grid-content ">
                  "12">
class="grid-content ">
                  "12">
class="grid-content ">
                
                

                "10" type="flex" class="row-bg" justify="center">
                  "12">
class="grid-content ">
                  "12">
class="grid-content ">
                  "12">
class="grid-content ">
                
            
            
            
"height:100%;width:100%" v-else-if="selected==4">
                "10" type="flex" class="row-bg" justify="center">
                  "8">
class="grid-a-contentWidth">
                  "8">
class="grid-a-contentWidth">
                  "8">
class="grid-a-contentWidth">
                
                

                "10" type="flex" class="row-bg" justify="center">
                  "8">
class="grid-a-contentWidth">
                  "8">
class="grid-a-contentWidth">
                  "8">
class="grid-a-contentWidth">
                
                

                "10" type="flex" class="row-bg" justify="center">
                  "8">
class="grid-a-contentWidth">
                  "8">
class="grid-a-contentWidth">
                  "8">
class="grid-a-contentWidth">
                
            
            
            
"height:100%;width:100%" v-else>
               "10" type="flex" class="row-bg" justify="start">
                  "8">
class="grid-a-contentWidth">
                  "8">
class="grid-a-contentWidth">
                  "8">
class="grid-a-contentWidth">
                
                

                "10" type="flex" class="row-bg" justify="start">
                    "8">
                      
class="grid-a-contentWidth">
                      

                      
class="grid-a-contentWidth">
                      
                    "16">
class="grid-a-content-a-Width" >
                  
            
          
    

样式(从里面对应取一下):

  1 

效果:

 侵删，原文链接：https://blog.csdn.net/jack_bob/article/details/79813114