diff --git a/docs/examples-dist/layout.vue b/docs/examples-dist/layout.vue
index 1f34c589f..20dab1011 100644
--- a/docs/examples-dist/layout.vue
+++ b/docs/examples-dist/layout.vue
@@ -1,31 +1,39 @@
 <template><section class="demo-layout"><h1 class="demo-title">layout</h1><example-block title="常规用法">
                 <zan-row>
   <zan-col span="8">
-    <div class="gray"></div>
+    <div class="gray">span: 8</div>
   </zan-col>
   <zan-col span="8">
-    <div class="white"></div>
+    <div class="white">span: 8</div>
   </zan-col>
   <zan-col span="8">
-    <div class="gray"></div>
+    <div class="gray">span: 8</div>
+  </zan-col>
+</zan-row>
+<zan-row>
+  <zan-col span="4">
+    <div class="gray">span: 4</div>
+  </zan-col>
+  <zan-col span="10" offset="4">
+    <div class="gray">offset: 4, span: 10</div>
   </zan-col>
 </zan-row>
 <zan-row>
   <zan-col offset="12" span="12">
-    <div class="gray"></div>
+    <div class="gray">offset: 12, span: 12</div>
   </zan-col>
 </zan-row>
 
               </example-block><example-block title="在列元素之间增加间距">
                 <zan-row gutter="10">
   <zan-col span="8">
-    <div class="gray"></div>
+    <div class="gray">span: 8</div>
   </zan-col>
   <zan-col span="8">
-    <div class="white"></div>
+    <div class="gray">span: 8</div>
   </zan-col>
   <zan-col span="8">
-    <div class="gray"></div>
+    <div class="gray">span: 8</div>
   </zan-col>
 </zan-row>
 
@@ -44,11 +52,19 @@
 
 .gray {
     height: 30px;
+    line-height: 30px;
+    font-size: 12px;
     background: #666;
+    color: #fff;
+    text-align: center;
 }
 .white {
     height: 30px;
+    line-height: 30px;
+    font-size: 12px;
     background: #fff;
+    color: #333;
+    text-align: center;
 }
 </style>
 <script>