diff --git a/src/components/core/register.js b/src/components/core/register.js
index 8c3c225b..b3f19794 100644
--- a/src/components/core/register.js
+++ b/src/components/core/register.js
@@ -3,8 +3,8 @@ import Vue from 'vue'
 import { GridLayout, GridItem } from 'vue-grid-layout'
 import SplitPane from 'vue-splitpane'
 
-Vue.component('GridLayout', GridLayout)
-Vue.component('GridItem', GridItem)
+Vue.component('d2-grid-layout', GridLayout)
+Vue.component('d2-grid-item', GridItem)
 Vue.component('SplitPane', SplitPane)
 
 Vue.component('d2-container', () => import('@/components/core/d2-container'))
diff --git a/src/pages/demo/chart/dynamicSize/index.vue b/src/pages/demo/chart/dynamicSize/index.vue
index b55cb71e..7dd32fd6 100644
--- a/src/pages/demo/chart/dynamicSize/index.vue
+++ b/src/pages/demo/chart/dynamicSize/index.vue
@@ -1,63 +1,63 @@
 <template>
   <d2-container type="ghost" :responsive="true" class="demo-chart-index">
-    <GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
+    <d2-grid-layout v-bind="layout" @layout-updated="layoutUpdatedHandler">
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
+      <d2-grid-item v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
           <G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></G2LineBase>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
+      <d2-grid-item v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
           <G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></G2LineStep>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
+      <d2-grid-item v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
           <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></G2ColumnBase>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
+      <d2-grid-item v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
           <G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></G2BarBase>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
+      <d2-grid-item v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
           <G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></G2PieBase>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
+      <d2-grid-item v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
           <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></G2NightingaleRoseBase>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
+      <d2-grid-item v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
           <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></G2RadarBase>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
+      <d2-grid-item v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
         <el-card class="header-in">
           <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
           <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></G2AreaBase>
         </el-card>
-      </GridItem>
-    </GridLayout>
+      </d2-grid-item>
+    </d2-grid-layout>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/components/layout/grid.vue b/src/pages/demo/components/layout/grid.vue
index 0b0eeb48..f9905920 100644
--- a/src/pages/demo/components/layout/grid.vue
+++ b/src/pages/demo/components/layout/grid.vue
@@ -1,9 +1,9 @@
 <template>
   <d2-container type="ghost" class="demo-plugins-vue-grid-layout-demo">
-    <GridLayout
+    <d2-grid-layout
       v-bind="layout"
       @layout-updated="layoutUpdatedHandler">
-      <GridItem
+      <d2-grid-item
         v-for="(item, index) in layout.layout"
         :key="index"
         v-bind="item"
@@ -19,8 +19,8 @@
             <div class="d2-mb">在控制台打印出数据变化</div>
           </template>
         </el-card>
-      </GridItem>
-    </GridLayout>
+      </d2-grid-item>
+    </d2-grid-layout>
   </d2-container>
 </template>