update grid

examples/docs/layout.md

@@ -0,0 +1,176 @@
+<style>
+  .demo-layout {
+    .el-row {
+      margin-bottom: 20px;
+    }
+    .el-col {
+      height: 36px;
+      border-radius: 4px;
+    }
+    .bg-purple-dark {
+      background: #99a9bf;
+    }
+    .bg-purple {
+      background: #d3dce6;
+    }
+    .bg-purple-light {
+      background: #e5e9f2;
+    }
+    .grid-content {
+      height: 100%;
+      border-radius: 4px;
+    }
+    .row-bg {
+      padding: 10px 0;
+      background-color: #f9fafc;
+    }
+  }
+</style>
+
+## Layout 布局
+
+通过基础的 24 分栏，迅速简便地创建布局
+
+### 基础布局
+
+使用单一分栏创建基础的栅格布局
+
+::: demo 通过 row 和 col 组件，并通过 col 组件的 `span` 属性我们就可以自由地组合布局。
+```html
+<el-row>
+  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+<el-row>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
+</el-row>
+```
+:::
+
+### 分栏间隔
+
+分栏之间存在间隔
+
+::: demo Row 组件 提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。
+```html
+<el-row :gutter="20">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+```
+:::
+
+### 混合布局
+
+通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局
+
+::: demo
+```html
+<el-row :gutter="20">
+  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+```
+:::
+
+### 分栏偏移
+
+分栏支持按一定的栏数进行偏移
+
+::: demo 通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数
+```html
+<el-row :gutter="20">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row :gutter="20">
+  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+```
+:::
+
+### 对齐方式
+
+对分栏进行灵活的对齐。
+
+::: demo 将 `type` 属性赋值为 'flex'，可以启用 flex 布局，并可通过 `justify` 属性来指定 start,center,end,space-between,space-around 其中的值来定义子元素的排版方式
+```html
+<el-row type="flex" class="row-bg">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row type="flex" class="row-bg" justify="center">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row type="flex" class="row-bg" justify="end">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row type="flex" class="row-bg" justify="space-between">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+<el-row type="flex" class="row-bg" justify="space-around">
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
+  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
+</el-row>
+```
+:::
+
+### Row Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| gutter | 栅格间隔 | number | — | 0 |
+| type | 布局模式，可选 flex，现代浏览器下有效 | string | - | - |
+| justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
+| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
+
+### Col Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| **span** | 栅格占据的列数，**必选参数** | number | — | — |
+| offset | 栅格左侧的间隔格数 | number | - | 0 |
+| push |  栅格向右移动格数 | number | - | 0 |
+| pull |  栅格向左移动格数 | number | - | 0 |

packages/row/src/row.vue

@@ -1,5 +1,15 @@
 <template>
-  <div class="el-row" :style="style">
+  <div
+    class="el-row"
+    :style="style"
+    :class="[
+      justify !== 'start' ? 'is-justify-' + justify : '',
+      align !== 'top' ? 'is-align-' + align : '',
+      {
+        'el-row--flex': type === 'flex'
+      }
+    ]"
+  >
     <slot></slot>
   </div>
 </template>
@@ -8,7 +18,16 @@
     name: 'ElRow',
 
     props: {
-      gutter: Number
+      gutter: Number,
+      type: String,
+      justify: {
+        type: String,
+        default: 'start'
+      },
+      align: {
+        type: String,
+        default: 'top'
+      }
     },
 
     computed: {

packages/theme-default/src/row.css

@@ -6,5 +6,27 @@
     position: relative;
     box-sizing: border-box;
     @utils-clearfix;
+
+    @m flex {
+      display: flex;
+      &:before,
+      &:after {
+        display: none;
+      }
+
+      @when justify-center {
+        justify-content: center;
+      }
+      @when justify-end {
+        justify-content: flex-end;
+      }
+      @when justify-space-between {
+        justify-content: space-between;
+      }
+      @when justify-space-around {
+        justify-content: space-around;
+      }
+    }
+
   }
 }