diff --git a/src/code/grid.js b/src/code/grid.js
new file mode 100644
index 0000000..f17952b
--- /dev/null
+++ b/src/code/grid.js
@@ -0,0 +1,24 @@
+let code = {};
+
+code.import = `
+"usingComponents": {
+    "i-grid": "../../dist/grid/index",
+    "i-grid-item": "../../dist/grid-item/index",
+    "i-grid-icon": "../../dist/grid-icon/index",
+    "i-grid-label": "../../dist/grid-label/index"
+}
+`;
+code.usage = `
+<i-grid>
+    <i-grid-item>
+        <i-grid-icon>
+            <image src="../images/icon-vip.png" />
+        </i-grid-icon>
+        <i-grid-label>Grid</i-grid-label>
+    </i-grid-item>
+    <i-grid-item>Grid</i-grid-item>
+    <i-grid-item>Grid</i-grid-item>
+</i-grid>
+`;
+
+export default code;
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 545061e..dfd16fc 100755
--- a/src/router.js
+++ b/src/router.js
@@ -30,6 +30,13 @@ const routers = [
         },
         component: (resolve) => require(['./views/components/layout.vue'], resolve)
     },
+    {
+        path: '/components/grid',
+        meta: {
+            title: '宫格 Grid'
+        },
+        component: (resolve) => require(['./views/components/grid.vue'], resolve)
+    },
     {
         path: '*',
         redirect: '/'
diff --git a/src/views/components/grid.vue b/src/views/components/grid.vue
new file mode 100644
index 0000000..f259202
--- /dev/null
+++ b/src/views/components/grid.vue
@@ -0,0 +1,117 @@
+<template>
+    <i-article>
+        <article>
+            <h1>Grid 宫格</h1>
+            <Anchor title="概述" h2></Anchor>
+            <p>基础宫格布局。每行 3 个宫格使用最佳。</p>
+            <p>宫格共包含 4 个组件：i-grid、i-grid-item、i-grid-icon、i-grid-label，其中，i-grid-icon 和 i-grid-label 默认定制好了样式，但在开发中也可不用这两个组件。</p>
+            <Anchor title="使用指南" h2></Anchor>
+            <p>在 .json 中引入组件</p>
+            <i-code bg lang="json">{{ code.import }}</i-code>
+            <Anchor title="示例" h2></Anchor>
+            <i-code bg lang="html">{{ code.usage }}</i-code>
+            <ad></ad>
+
+            <div class="api">
+                <Anchor title="API" h2></Anchor>
+                <Anchor title="Grid properties" h3></Anchor>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>属性</th>
+                            <th>说明</th>
+                            <th>类型</th>
+                            <th>默认值</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>i-class</td>
+                            <td>自定义 class 类名</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <Anchor title="GridItem properties" h3></Anchor>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>属性</th>
+                        <th>说明</th>
+                        <th>类型</th>
+                        <th>默认值</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>i-class</td>
+                        <td>自定义 class 类名</td>
+                        <td>String</td>
+                        <td>-</td>
+                    </tr>
+                    </tbody>
+                </table>
+                <Anchor title="GridIcon properties" h3></Anchor>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>属性</th>
+                        <th>说明</th>
+                        <th>类型</th>
+                        <th>默认值</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>i-class</td>
+                        <td>自定义 class 类名</td>
+                        <td>String</td>
+                        <td>-</td>
+                    </tr>
+                    </tbody>
+                </table>
+                <Anchor title="GridLabel properties" h3></Anchor>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>属性</th>
+                        <th>说明</th>
+                        <th>类型</th>
+                        <th>默认值</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>i-class</td>
+                        <td>自定义 class 类名</td>
+                        <td>String</td>
+                        <td>-</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </article>
+    </i-article>
+</template>
+<script>
+    import iArticle from '../../components/article.vue';
+    import iCode from 'iCode';
+    import Demo from '../../components/demo.vue';
+    import Code from '../../code/grid';
+    import Anchor from '../../components/anchor.vue';
+
+    export default {
+        components: {
+            iArticle,
+            iCode,
+            Demo,
+            Anchor
+        },
+        data () {
+            return {
+                code: Code
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/views/components/layout.vue b/src/views/components/layout.vue
index 2cbdd68..8bd532e 100644
--- a/src/views/components/layout.vue
+++ b/src/views/components/layout.vue
@@ -21,7 +21,7 @@
 
             <div class="api">
                 <Anchor title="API" h2></Anchor>
-                <Anchor title="Row props" h3></Anchor>
+                <Anchor title="Row properties" h3></Anchor>
                 <table>
                     <thead>
                         <tr>
@@ -40,7 +40,7 @@
                         </tr>
                     </tbody>
                 </table>
-                <Anchor title="Col props" h3></Anchor>
+                <Anchor title="Col properties" h3></Anchor>
                 <table>
                     <thead>
                         <tr>
diff --git a/src/views/practice/case-en.vue b/src/views/practice/case-en.vue
deleted file mode 100644
index f2dc8d5..0000000
--- a/src/views/practice/case-en.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<style>
-    .demo-case-img{
-        width: 100%;
-    }
-    .demo-case-img img{
-        width: 100%;
-    }
-    .demo-case .ivu-col p{
-        text-align: justify;
-        line-height: 1.6;
-    }
-</style>
-<template>
-    <i-article>
-        <article class="demo-case">
-            <h1>Practical Cases</h1>
-            <p>iView is a set of front-end solutions developed by <a href="https://www.talkingdata.com/" target="_blank">TalkingData</a> for intermediate and backend business, including engineering, theme customization, multi-language and other functions, greatly improving the development efficiency.</p>
-            <p>Since late 2016, iView has been used in many new projects of TalkingData, and even gradually used in refactoring of some core projects.</p>
-            <p>iView has gradually become the design and development specification for TalkingData.</p>
-            <Anchor title="The Best Case" h2></Anchor>
-            <Anchor title="DMap" h3></Anchor>
-            <Row :gutter="32">
-                <i-col span="10">
-                    <p>DMap is a data visualization platform that focuses on location-related big data. TalkingData's data assets and even the big data industry's data are mostly location-giving data. DMap takes geographical analysis of location data as the core, takes into account traditional data visualization methods such as chart analysis, and builds data reports based on this. The ability of large-screen applications can meet the data analysis and visualization requirements of data analysts and data scientists, and can improve the development efficiency of similar applications in the form of JS-SDK in the near future.</p>
-                    <p><a href="http://dmap.talkingdata.com/?from=iview" target="_blank">Immediate access</a></p>
-                </i-col>
-                <i-col span="14">
-                    <Carousel dots="outside">
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-4-1.jpg">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-4-2.jpg">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-4-3.jpg">
-                            </div>
-                        </Carousel-item>
-                    </Carousel>
-                </i-col>
-            </Row>
-            <Anchor title="Smart Selection" h3></Anchor>
-            <Row :gutter="32">
-                <i-col span="10">
-                    <p>Smart Selection (SS) is a joint venture of Tencent Cloud and TalkingData. It combines the advantages of both parties, integrates classic models and prediction algorithms, and integrates massive data and machine learning. It is designed to address the location of entity stores and the operation of business districts. Problems, intelligence products for smart retail and diversified offline industries.</p>
-                    <p><a href="https://cloud.tencent.com/product/ss/details" target="_blank">Immediate access</a></p>
-                </i-col>
-                <i-col span="14">
-                    <Carousel dots="outside">
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-6-1.jpg">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-6-2.jpg">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-6-3.jpg">
-                            </div>
-                        </Carousel-item>
-                    </Carousel>
-                </i-col>
-            </Row>
-            <Anchor title="App Analytics" h3></Anchor>
-            <Row :gutter="32">
-                <i-col span="10">
-                    <p>App analytics is the core product of TalkingData. Due to historical reasons, the project has been precipitated for a long time. Compared with the traditional development model of the previous version, AppAnalytics has fully been refactored based on iView, and its visual effects and interaction has been greatly improved.</p>
-                    <p><a href="https://www.talkingdata.com/products.jsp?languagetype=zh_cn" target="_blank">Immediate access</a></p>
-                </i-col>
-                <i-col span="14">
-                    <Carousel dots="outside">
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-1-1.png">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-1-2.png">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-1-3.png">
-                            </div>
-                        </Carousel-item>
-                    </Carousel>
-                </i-col>
-            </Row>
-            <Anchor title="Easy Mock" h3></Anchor>
-            <Row :gutter="32">
-                <i-col span="10">
-                    <p>Easy Mock is a persistent service that generates mock data quickly and provids visualization view. It based on iView and rendered by server (SSR).</p>
-                    <p><a href="https://easy-mock.com/" target="_blank">Immediate access</a></p>
-                </i-col>
-                <i-col span="14">
-                    <Carousel dots="outside">
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-5-1.jpg">
-                            </div>
-                        </Carousel-item>
-                    </Carousel>
-                </i-col>
-            </Row>
-            <Anchor title="Marketing Cloud" h3></Anchor>
-            <Row :gutter="32">
-                <i-col span="10">
-                    <p>Marketing Cloud is an integrated database marketing product, providing a 360-degree analysis service of customer characteristics and building a comprehensive user portrait based on big data.</p>
-                    <p><a href="https://www.talkingdata.com/product-MarketingCloud.jsp?languagetype=zh_cn" target="_blank">Immediate access</a></p>
-                </i-col>
-                <i-col span="14">
-                    <Carousel dots="outside">
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-2-1.png">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-2-2.png">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-2-3.png">
-                            </div>
-                        </Carousel-item>
-                    </Carousel>
-                </i-col>
-            </Row>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Anchor
-        },
-        data () {
-            return {
-
-            }
-        },
-        methods: {
-
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/views/practice/case.vue b/src/views/practice/case.vue
deleted file mode 100644
index c1c91f0..0000000
--- a/src/views/practice/case.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<style>
-    .demo-case-img{
-        width: 100%;
-    }
-    .demo-case-img img{
-        width: 100%;
-    }
-    .demo-case .ivu-col p{
-        text-align: justify;
-        line-height: 1.6;
-    }
-</style>
-<template>
-    <i-article>
-        <article class="demo-case">
-            <h1>实践案例</h1>
-            <p>iView 是由 <a href="https://www.talkingdata.com/" target="_blank">TalkingData</a> 开发的，面向中后台业务的一整套前端解决方案，包含了工程构建、主题定制、多语言等功能，极大提升了开发效率。</p>
-            <p>从 2016 年下旬开始，TalkingData 的众多新项目开始使用 iView，部分核心项目已逐步开始使用 iView 重构。</p>
-            <p>iView 已逐步成为 TalkingData 的设计和开发规范。</p>
-            <Anchor title="最佳实践" h2></Anchor>
-            <Anchor title="谛听（DMap）" h3></Anchor>
-            <Row :gutter="32">
-                <i-col span="10">
-                    <p>DMap 是一个专注于位置相关大数据的数据可视化平台。TalkingData 的数据资产乃至大数据行业的数据大部分都是给予位置的数据，DMap 以给予位置的大数据的地理分析为核心，兼顾图表分析等传统数据可视化手段，并在此基础上构建数据报告、大屏应用的能力，可以满足数据分析师和数据科学家的数据分析及可视化需求，并能够在不久的将来以 JS-SDK 的形式提高相似应用的开发效率。</p>
-                    <p><a href="http://dmap.talkingdata.com/?from=iview" target="_blank">立即访问</a></p>
-                </i-col>
-                <i-col span="14">
-                    <Carousel dots="outside">
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-4-1.jpg">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-4-2.jpg">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-4-3.jpg">
-                            </div>
-                        </Carousel-item>
-                    </Carousel>
-                </i-col>
-            </Row>
-            <Anchor title="智选" h3></Anchor>
-            <Row :gutter="32">
-                <i-col span="10">
-                    <p>智能选址（Smart  Selection，SS）是腾讯云与 TalkingData 联合，依托双方优势，结合经典模型和预测算法，将海量数据与机器学习有机整合，旨在解决实体门店的选址、商圈经营等场景问题，为智慧零售及多元化线下产业助力的数据智能产品。</p>
-                    <p><a href="https://cloud.tencent.com/product/ss/details" target="_blank">立即访问</a></p>
-                </i-col>
-                <i-col span="14">
-                    <Carousel dots="outside">
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-6-1.jpg">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-6-2.jpg">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-6-3.jpg">
-                            </div>
-                        </Carousel-item>
-                    </Carousel>
-                </i-col>
-            </Row>
-            <Anchor title="App 统计分析" h3></Anchor>
-            <Row :gutter="32">
-                <i-col span="10">
-                    <p>App 统计分析是 TalkingData 最核心的产品，因历史原因，项目已沉淀很久，开发模式也比较传统，现已全面基于 iView 进行重构，视觉和交互都有极大的提升。</p>
-                    <p><a href="https://www.talkingdata.com/products.jsp?languagetype=zh_cn" target="_blank">立即访问</a></p>
-                </i-col>
-                <i-col span="14">
-                    <Carousel dots="outside">
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-1-1.png">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-1-2.png">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-1-3.png">
-                            </div>
-                        </Carousel-item>
-                    </Carousel>
-                </i-col>
-            </Row>
-            <Anchor title="Easy Mock" h3></Anchor>
-            <Row :gutter="32">
-                <i-col span="10">
-                    <p>Easy Mock 是由大搜车开发的一个可视化，并且能快速生成模拟数据的持久化服务。全站基于 iView 并且由服务端渲染（SSR）。</p>
-                    <p><a href="https://easy-mock.com/" target="_blank">立即访问</a></p>
-                </i-col>
-                <i-col span="14">
-                    <Carousel dots="outside">
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-5-1.jpg">
-                            </div>
-                        </Carousel-item>
-                    </Carousel>
-                </i-col>
-            </Row>
-            <Anchor title="MarketingCloud 营销云" h3></Anchor>
-            <Row :gutter="32">
-                <i-col span="10">
-                    <p>Marketing Cloud营销云是一体化数据营销产品，提供360度客群特征分析服务，用大数据全面构建人群画像。</p>
-                    <p><a href="https://www.talkingdata.com/product-MarketingCloud.jsp?languagetype=zh_cn" target="_blank">立即访问</a></p>
-                </i-col>
-                <i-col span="14">
-                    <Carousel dots="outside">
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-2-1.png">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-2-2.png">
-                            </div>
-                        </Carousel-item>
-                        <Carousel-item>
-                            <div class="demo-case-img">
-                                <img src="../../images/case-2-3.png">
-                            </div>
-                        </Carousel-item>
-                    </Carousel>
-                </i-col>
-            </Row>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Anchor
-        },
-        data () {
-            return {
-
-            }
-        },
-        methods: {
-
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/views/practice/logo-en.vue b/src/views/practice/logo-en.vue
deleted file mode 100644
index 2d6d04d..0000000
--- a/src/views/practice/logo-en.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<style>
-    .case-logo{
-        width: 100%;
-    }
-    .case-logo img{
-        width: 100%;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>iView Logo Design</h1>
-            <div class="case-logo">
-                <img src="../../images/case-logo.png">
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Anchor
-        },
-        data () {
-            return {
-
-            }
-        },
-        methods: {
-
-        }
-    };
-</script>
\ No newline at end of file
diff --git a/src/views/practice/logo.vue b/src/views/practice/logo.vue
deleted file mode 100644
index 4925604..0000000
--- a/src/views/practice/logo.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<style>
-    .case-logo{
-        width: 100%;
-    }
-    .case-logo img{
-        width: 100%;
-    }
-</style>
-<template>
-    <i-article>
-        <article>
-            <h1>iView Logo 设计思路</h1>
-            <div class="case-logo">
-                <img src="../../images/case-logo.png">
-            </div>
-        </article>
-    </i-article>
-</template>
-<script>
-    import iArticle from '../../components/article.vue';
-    import iCode from 'iCode';
-    import Anchor from '../../components/anchor.vue';
-
-    export default {
-        components: {
-            iArticle,
-            iCode,
-            Anchor
-        },
-        data () {
-            return {
-
-            }
-        },
-        methods: {
-
-        }
-    };
-</script>
\ No newline at end of file