From a9c00cd62df6d7154657ad9287cd6903e5c7ff63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Tue, 30 Jan 2018 11:04:12 +0800
Subject: [PATCH] update demo

---
 examples/routers/grid.vue | 163 +++++++++++++++++++++++++++++++++-----
 1 file changed, 145 insertions(+), 18 deletions(-)

diff --git a/examples/routers/grid.vue b/examples/routers/grid.vue
index d36692ff..580fa264 100644
--- a/examples/routers/grid.vue
+++ b/examples/routers/grid.vue
@@ -1,25 +1,152 @@
 <style>
-    /*.ivu-col div{*/
-        /*background: rgba(0,153,229,.7);*/
-    /*}*/
+    .view {
+        height: 100px;
+        width: 100px;
+        background: yellow;
+    }
 </style>
 <template>
     <div>
-        <Row :gutter="64">
-            <Card>
-                <i-col span="6">
-                    <div>col-6</div>
-                </i-col>
-                <i-col span="6">
-                    <div>col-6</div>
-                </i-col>
-                <i-col span="6">
-                    <div>col-6</div>
-                </i-col>
-                <i-col span="6">
-                    <div>col-6</div>
-                </i-col>
-            </Card>
+        <Row type='flex' justify='center'>
+            <i-col span='21' class="offset-header">
+                <Row type='flex' :gutter='16' justify='space-between'>
+                    <i-col :order='25'>
+                        <div class="view">
+                            <label>245</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='1'>
+                        <div class="view" >
+                            <label>1</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='2'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='3'>
+                        <div class="view"   >
+                            <label>3</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='4'>
+                        <div class="view"   >
+                            <label>4</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='5'>
+                        <div class="view"   >
+                            <label>5</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='6'>
+                        <div class="view"   >
+                            <label>6</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='7'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='8'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='9'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='10'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='11'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='12'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='13'>
+                        <div class="view"   >
+                            <label>12</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='14'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='15'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='16'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='17'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='18'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='19'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='20'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='21'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='22'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='23'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='24'>
+                        <div class="view"   >
+                            <label>2</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='25'>
+                        <div class="view"   >
+                            <label>25-------</label>
+                        </div>
+                    </i-col>
+                    <i-col :xs='12' :sm='12' :md='8' :lg='8' :order='26'>
+                        <div class="view"   >
+                            <label>26------</label>
+                        </div>
+                    </i-col>
+                </Row>
+            </i-col>
         </Row>
     </div>
 </template>