diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap
index 9c071ced42..e065c2dd0a 100644
--- a/components/grid/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/grid/__tests__/__snapshots__/demo.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-row"
   >
@@ -10,7 +10,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     >
       col
     </div>
-  </div>
+  </div>,
   <div
     class="ant-row"
   >
@@ -24,7 +24,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     >
       col-12
     </div>
-  </div>
+  </div>,
   <div
     class="ant-row"
   >
@@ -43,7 +43,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     >
       col-8
     </div>
-  </div>
+  </div>,
   <div
     class="ant-row"
   >
@@ -67,15 +67,23 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     >
       col-6
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
-<div>
-  <p>
-    sub-element align left
-  </p>
+Array [
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      sub-element align left
+    </span>
+  </div>,
   <div
     class="ant-row ant-row-start"
   >
@@ -99,10 +107,18 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     >
       col-4
     </div>
-  </div>
-  <p>
-    sub-element align center
-  </p>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      sub-element align center
+    </span>
+  </div>,
   <div
     class="ant-row ant-row-center"
   >
@@ -126,10 +142,18 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     >
       col-4
     </div>
-  </div>
-  <p>
-    sub-element align right
-  </p>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      sub-element align right
+    </span>
+  </div>,
   <div
     class="ant-row ant-row-end"
   >
@@ -153,10 +177,18 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     >
       col-4
     </div>
-  </div>
-  <p>
-    sub-element monospaced arrangement
-  </p>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      sub-element monospaced arrangement
+    </span>
+  </div>,
   <div
     class="ant-row ant-row-space-between"
   >
@@ -180,10 +212,18 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     >
       col-4
     </div>
-  </div>
-  <p>
-    sub-element align full
-  </p>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      sub-element align full
+    </span>
+  </div>,
   <div
     class="ant-row ant-row-space-around"
   >
@@ -207,15 +247,23 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     >
       col-4
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
-<div>
-  <p>
-    Align Top
-  </p>
+Array [
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Align Top
+    </span>
+  </div>,
   <div
     class="ant-row ant-row-center ant-row-top"
   >
@@ -255,10 +303,18 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
         col-4
       </p>
     </div>
-  </div>
-  <p>
-    Align Center
-  </p>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Align Center
+    </span>
+  </div>,
   <div
     class="ant-row ant-row-space-around ant-row-middle"
   >
@@ -298,10 +354,18 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
         col-4
       </p>
     </div>
-  </div>
-  <p>
-    Align Bottom
-  </p>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Align Bottom
+    </span>
+  </div>,
   <div
     class="ant-row ant-row-space-between ant-row-bottom"
   >
@@ -341,44 +405,50 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
         col-4
       </p>
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
-<div>
+<div
+  class="ant-row"
+>
   <div
-    class="ant-row"
+    class="ant-col ant-col-6 ant-col-order-4"
   >
-    <div
-      class="ant-col ant-col-6 ant-col-order-4"
-    >
-      1 col-order-4
-    </div>
-    <div
-      class="ant-col ant-col-6 ant-col-order-3"
-    >
-      2 col-order-3
-    </div>
-    <div
-      class="ant-col ant-col-6 ant-col-order-2"
-    >
-      3 col-order-2
-    </div>
-    <div
-      class="ant-col ant-col-6 ant-col-order-1"
-    >
-      4 col-order-1
-    </div>
+    1 col-order-4
+  </div>
+  <div
+    class="ant-col ant-col-6 ant-col-order-3"
+  >
+    2 col-order-3
+  </div>
+  <div
+    class="ant-col ant-col-6 ant-col-order-2"
+  >
+    3 col-order-2
+  </div>
+  <div
+    class="ant-col ant-col-6 ant-col-order-1"
+  >
+    4 col-order-1
   </div>
 </div>
 `;
 
 exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
-<div>
-  <p>
-    Percentage columns
-  </p>
+Array [
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Percentage columns
+    </span>
+  </div>,
   <div
     class="ant-row"
   >
@@ -394,10 +464,18 @@ exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
     >
       3 / 5
     </div>
-  </div>
-  <p>
-    Fill rest
-  </p>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Fill rest
+    </span>
+  </div>,
   <div
     class="ant-row"
   >
@@ -413,10 +491,18 @@ exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
     >
       Fill Rest
     </div>
-  </div>
-  <p>
-    Raw flex style
-  </p>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Raw flex style
+    </span>
+  </div>,
   <div
     class="ant-row"
   >
@@ -432,14 +518,23 @@ exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
     >
       0 1 300px
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
-<div
-  class="gutter-example"
->
+Array [
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Horizontal
+    </span>
+  </div>,
   <div
     class="ant-row"
     style="margin-left:-8px;margin-right:-8px"
@@ -449,7 +544,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       style="padding-left:8px;padding-right:8px"
     >
       <div
-        class="gutter-box"
+        style="background:#0092ff;padding:8px 0"
       >
         col-6
       </div>
@@ -459,7 +554,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       style="padding-left:8px;padding-right:8px"
     >
       <div
-        class="gutter-box"
+        style="background:#0092ff;padding:8px 0"
       >
         col-6
       </div>
@@ -469,7 +564,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       style="padding-left:8px;padding-right:8px"
     >
       <div
-        class="gutter-box"
+        style="background:#0092ff;padding:8px 0"
       >
         col-6
       </div>
@@ -479,62 +574,169 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       style="padding-left:8px;padding-right:8px"
     >
       <div
-        class="gutter-box"
+        style="background:#0092ff;padding:8px 0"
       >
         col-6
       </div>
     </div>
-  </div>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Responsive
+    </span>
+  </div>,
   <div
     class="ant-row"
-    style="margin-left:-16px;margin-right:-16px;margin-top:-10px;margin-bottom:10px"
+    style="margin-left:-16px;margin-right:-16px"
   >
     <div
       class="ant-col ant-col-6 gutter-row"
-      style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
+      style="padding-left:16px;padding-right:16px"
     >
       <div
-        class="gutter-box"
+        style="background:#0092ff;padding:8px 0"
       >
         col-6
       </div>
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
-      style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
+      style="padding-left:16px;padding-right:16px"
     >
       <div
-        class="gutter-box"
+        style="background:#0092ff;padding:8px 0"
       >
         col-6
       </div>
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
-      style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
+      style="padding-left:16px;padding-right:16px"
     >
       <div
-        class="gutter-box"
+        style="background:#0092ff;padding:8px 0"
       >
         col-6
       </div>
     </div>
     <div
       class="ant-col ant-col-6 gutter-row"
-      style="padding-left:16px;padding-right:16px;padding-top:10px;padding-bottom:10px"
+      style="padding-left:16px;padding-right:16px"
     >
       <div
-        class="gutter-box"
+        style="background:#0092ff;padding:8px 0"
       >
         col-6
       </div>
     </div>
-  </div>
-</div>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    role="separator"
+    style="color:#333;font-weight:normal"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Vertical
+    </span>
+  </div>,
+  <div
+    class="ant-row"
+    style="margin-left:-8px;margin-right:-8px;margin-top:-12px;margin-bottom:12px"
+  >
+    <div
+      class="ant-col ant-col-6 gutter-row"
+      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+    >
+      <div
+        style="background:#0092ff;padding:8px 0"
+      >
+        col-6
+      </div>
+    </div>
+    <div
+      class="ant-col ant-col-6 gutter-row"
+      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+    >
+      <div
+        style="background:#0092ff;padding:8px 0"
+      >
+        col-6
+      </div>
+    </div>
+    <div
+      class="ant-col ant-col-6 gutter-row"
+      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+    >
+      <div
+        style="background:#0092ff;padding:8px 0"
+      >
+        col-6
+      </div>
+    </div>
+    <div
+      class="ant-col ant-col-6 gutter-row"
+      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+    >
+      <div
+        style="background:#0092ff;padding:8px 0"
+      >
+        col-6
+      </div>
+    </div>
+    <div
+      class="ant-col ant-col-6 gutter-row"
+      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+    >
+      <div
+        style="background:#0092ff;padding:8px 0"
+      >
+        col-6
+      </div>
+    </div>
+    <div
+      class="ant-col ant-col-6 gutter-row"
+      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+    >
+      <div
+        style="background:#0092ff;padding:8px 0"
+      >
+        col-6
+      </div>
+    </div>
+    <div
+      class="ant-col ant-col-6 gutter-row"
+      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+    >
+      <div
+        style="background:#0092ff;padding:8px 0"
+      >
+        col-6
+      </div>
+    </div>
+    <div
+      class="ant-col ant-col-6 gutter-row"
+      style="padding-left:8px;padding-right:8px;padding-top:12px;padding-bottom:12px"
+    >
+      <div
+        style="background:#0092ff;padding:8px 0"
+      >
+        col-6
+      </div>
+    </div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-row"
   >
@@ -548,7 +750,7 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
     >
       col-8
     </div>
-  </div>
+  </div>,
   <div
     class="ant-row"
   >
@@ -562,7 +764,7 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
     >
       col-6 col-offset-6
     </div>
-  </div>
+  </div>,
   <div
     class="ant-row"
   >
@@ -571,310 +773,306 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
     >
       col-12 col-offset-6
     </div>
-  </div>
-</div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
-<div>
-  <div
-    style="margin-bottom:16px"
+Array [
+  <span
+    style="margin-right:6px"
+  >
+    Horizontal Gutter (px): 
+  </span>,
+  <div
+    style="width:50%"
   >
-    <span
-      style="margin-right:6px"
-    >
-      Horizontal Gutter (px): 
-    </span>
     <div
-      style="width:50%"
+      class="ant-slider ant-slider-with-marks"
     >
       <div
-        class="ant-slider ant-slider-with-marks"
+        class="ant-slider-rail"
+      />
+      <div
+        class="ant-slider-track"
+        style="left:0%;right:auto;width:20%"
+      />
+      <div
+        class="ant-slider-step"
       >
-        <div
-          class="ant-slider-rail"
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="left:0%"
         />
-        <div
-          class="ant-slider-track"
-          style="left:0%;right:auto;width:20%"
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="left:20%"
         />
-        <div
-          class="ant-slider-step"
+        <span
+          class="ant-slider-dot"
+          style="left:40%"
+        />
+        <span
+          class="ant-slider-dot"
+          style="left:60%"
+        />
+        <span
+          class="ant-slider-dot"
+          style="left:80%"
+        />
+        <span
+          class="ant-slider-dot"
+          style="left:100%"
+        />
+      </div>
+      <div
+        aria-disabled="false"
+        aria-valuemax="5"
+        aria-valuemin="0"
+        aria-valuenow="1"
+        class="ant-slider-handle"
+        role="slider"
+        style="left:20%;right:auto;transform:translateX(-50%)"
+        tabindex="0"
+      />
+      <div
+        class="ant-slider-mark"
+      >
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
         >
-          <span
-            class="ant-slider-dot ant-slider-dot-active"
-            style="left:0%"
-          />
-          <span
-            class="ant-slider-dot ant-slider-dot-active"
-            style="left:20%"
-          />
-          <span
-            class="ant-slider-dot"
-            style="left:40%"
-          />
-          <span
-            class="ant-slider-dot"
-            style="left:60%"
-          />
-          <span
-            class="ant-slider-dot"
-            style="left:80%"
-          />
-          <span
-            class="ant-slider-dot"
-            style="left:100%"
-          />
-        </div>
-        <div
-          aria-disabled="false"
-          aria-valuemax="5"
-          aria-valuemin="0"
-          aria-valuenow="1"
-          class="ant-slider-handle"
-          role="slider"
-          style="left:20%;right:auto;transform:translateX(-50%)"
-          tabindex="0"
-        />
-        <div
-          class="ant-slider-mark"
+          8
+        </span>
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
         >
-          <span
-            class="ant-slider-mark-text ant-slider-mark-text-active"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
-          >
-            8
-          </span>
-          <span
-            class="ant-slider-mark-text ant-slider-mark-text-active"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
-          >
-            16
-          </span>
-          <span
-            class="ant-slider-mark-text"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
-          >
-            24
-          </span>
-          <span
-            class="ant-slider-mark-text"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
-          >
-            32
-          </span>
-          <span
-            class="ant-slider-mark-text"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
-          >
-            40
-          </span>
-          <span
-            class="ant-slider-mark-text"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
-          >
-            48
-          </span>
-        </div>
+          16
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
+        >
+          24
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
+        >
+          32
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
+        >
+          40
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
+        >
+          48
+        </span>
       </div>
     </div>
-    <span
-      style="margin-right:6px"
-    >
-      Vertical Gutter (px): 
-    </span>
+  </div>,
+  <span
+    style="margin-right:6px"
+  >
+    Vertical Gutter (px): 
+  </span>,
+  <div
+    style="width:50%"
+  >
     <div
-      style="width:50%"
+      class="ant-slider ant-slider-with-marks"
     >
       <div
-        class="ant-slider ant-slider-with-marks"
+        class="ant-slider-rail"
+      />
+      <div
+        class="ant-slider-track"
+        style="left:0%;right:auto;width:20%"
+      />
+      <div
+        class="ant-slider-step"
       >
-        <div
-          class="ant-slider-rail"
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="left:0%"
         />
-        <div
-          class="ant-slider-track"
-          style="left:0%;right:auto;width:20%"
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="left:20%"
         />
-        <div
-          class="ant-slider-step"
+        <span
+          class="ant-slider-dot"
+          style="left:40%"
+        />
+        <span
+          class="ant-slider-dot"
+          style="left:60%"
+        />
+        <span
+          class="ant-slider-dot"
+          style="left:80%"
+        />
+        <span
+          class="ant-slider-dot"
+          style="left:100%"
+        />
+      </div>
+      <div
+        aria-disabled="false"
+        aria-valuemax="5"
+        aria-valuemin="0"
+        aria-valuenow="1"
+        class="ant-slider-handle"
+        role="slider"
+        style="left:20%;right:auto;transform:translateX(-50%)"
+        tabindex="0"
+      />
+      <div
+        class="ant-slider-mark"
+      >
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
         >
-          <span
-            class="ant-slider-dot ant-slider-dot-active"
-            style="left:0%"
-          />
-          <span
-            class="ant-slider-dot ant-slider-dot-active"
-            style="left:20%"
-          />
-          <span
-            class="ant-slider-dot"
-            style="left:40%"
-          />
-          <span
-            class="ant-slider-dot"
-            style="left:60%"
-          />
-          <span
-            class="ant-slider-dot"
-            style="left:80%"
-          />
-          <span
-            class="ant-slider-dot"
-            style="left:100%"
-          />
-        </div>
-        <div
-          aria-disabled="false"
-          aria-valuemax="5"
-          aria-valuemin="0"
-          aria-valuenow="1"
-          class="ant-slider-handle"
-          role="slider"
-          style="left:20%;right:auto;transform:translateX(-50%)"
-          tabindex="0"
-        />
-        <div
-          class="ant-slider-mark"
+          8
+        </span>
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
         >
-          <span
-            class="ant-slider-mark-text ant-slider-mark-text-active"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
-          >
-            8
-          </span>
-          <span
-            class="ant-slider-mark-text ant-slider-mark-text-active"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
-          >
-            16
-          </span>
-          <span
-            class="ant-slider-mark-text"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
-          >
-            24
-          </span>
-          <span
-            class="ant-slider-mark-text"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
-          >
-            32
-          </span>
-          <span
-            class="ant-slider-mark-text"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
-          >
-            40
-          </span>
-          <span
-            class="ant-slider-mark-text"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
-          >
-            48
-          </span>
-        </div>
+          16
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
+        >
+          24
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
+        >
+          32
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
+        >
+          40
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
+        >
+          48
+        </span>
       </div>
     </div>
-    <span
-      style="margin-right:6px"
-    >
-      Column Count:
-    </span>
+  </div>,
+  <span
+    style="margin-right:6px"
+  >
+    Column Count:
+  </span>,
+  <div
+    style="width:50%;margin-bottom:48px"
+  >
     <div
-      style="width:50%"
+      class="ant-slider ant-slider-with-marks"
     >
       <div
-        class="ant-slider ant-slider-with-marks"
+        class="ant-slider-rail"
+      />
+      <div
+        class="ant-slider-track"
+        style="left:0%;right:auto;width:40%"
+      />
+      <div
+        class="ant-slider-step"
       >
-        <div
-          class="ant-slider-rail"
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="left:0%"
         />
-        <div
-          class="ant-slider-track"
-          style="left:0%;right:auto;width:40%"
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="left:20%"
         />
-        <div
-          class="ant-slider-step"
+        <span
+          class="ant-slider-dot ant-slider-dot-active"
+          style="left:40%"
+        />
+        <span
+          class="ant-slider-dot"
+          style="left:60%"
+        />
+        <span
+          class="ant-slider-dot"
+          style="left:80%"
+        />
+        <span
+          class="ant-slider-dot"
+          style="left:100%"
+        />
+      </div>
+      <div
+        aria-disabled="false"
+        aria-valuemax="5"
+        aria-valuemin="0"
+        aria-valuenow="2"
+        class="ant-slider-handle"
+        role="slider"
+        style="left:40%;right:auto;transform:translateX(-50%)"
+        tabindex="0"
+      />
+      <div
+        class="ant-slider-mark"
+      >
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
         >
-          <span
-            class="ant-slider-dot ant-slider-dot-active"
-            style="left:0%"
-          />
-          <span
-            class="ant-slider-dot ant-slider-dot-active"
-            style="left:20%"
-          />
-          <span
-            class="ant-slider-dot ant-slider-dot-active"
-            style="left:40%"
-          />
-          <span
-            class="ant-slider-dot"
-            style="left:60%"
-          />
-          <span
-            class="ant-slider-dot"
-            style="left:80%"
-          />
-          <span
-            class="ant-slider-dot"
-            style="left:100%"
-          />
-        </div>
-        <div
-          aria-disabled="false"
-          aria-valuemax="5"
-          aria-valuemin="0"
-          aria-valuenow="2"
-          class="ant-slider-handle"
-          role="slider"
-          style="left:40%;right:auto;transform:translateX(-50%)"
-          tabindex="0"
-        />
-        <div
-          class="ant-slider-mark"
+          2
+        </span>
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
         >
-          <span
-            class="ant-slider-mark-text ant-slider-mark-text-active"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:0%"
-          >
-            2
-          </span>
-          <span
-            class="ant-slider-mark-text ant-slider-mark-text-active"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:20%"
-          >
-            3
-          </span>
-          <span
-            class="ant-slider-mark-text ant-slider-mark-text-active"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
-          >
-            4
-          </span>
-          <span
-            class="ant-slider-mark-text"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
-          >
-            6
-          </span>
-          <span
-            class="ant-slider-mark-text"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
-          >
-            8
-          </span>
-          <span
-            class="ant-slider-mark-text"
-            style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
-          >
-            12
-          </span>
-        </div>
+          3
+        </span>
+        <span
+          class="ant-slider-mark-text ant-slider-mark-text-active"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:40%"
+        >
+          4
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:60%"
+        >
+          6
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:80%"
+        >
+          8
+        </span>
+        <span
+          class="ant-slider-mark-text"
+          style="transform:translateX(-50%);-ms-transform:translateX(-50%);left:100%"
+        >
+          12
+        </span>
       </div>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-row"
     style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
@@ -911,7 +1109,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
         Column
       </div>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-row"
     style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
@@ -948,7 +1146,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
         Column
       </div>
     </div>
-  </div>
+  </div>,
   <pre>
     &lt;Row gutter={[16, 16]}&gt;
   &lt;Col span={6} /&gt;
@@ -956,7 +1154,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
   &lt;Col span={6} /&gt;
   &lt;Col span={6} /&gt;
 &lt;/Row&gt;
-  </pre>
+  </pre>,
   <pre>
     &lt;Row gutter={[16, 16]}&gt;
   &lt;Col span={6} /&gt;
@@ -964,8 +1162,8 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
   &lt;Col span={6} /&gt;
   &lt;Col span={6} /&gt;
 &lt;/Row&gt;
-  </pre>
-</div>
+  </pre>,
+]
 `;
 
 exports[`renders ./components/grid/demo/responsive.md correctly 1`] = `
@@ -1013,20 +1211,18 @@ exports[`renders ./components/grid/demo/responsive-more.md correctly 1`] = `
 `;
 
 exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
-<div>
+<div
+  class="ant-row"
+>
   <div
-    class="ant-row"
+    class="ant-col ant-col-18 ant-col-push-6"
   >
-    <div
-      class="ant-col ant-col-18 ant-col-push-6"
-    >
-      col-18 col-push-6
-    </div>
-    <div
-      class="ant-col ant-col-6 ant-col-pull-18"
-    >
-      col-6 col-pull-18
-    </div>
+    col-18 col-push-6
+  </div>
+  <div
+    class="ant-col ant-col-6 ant-col-pull-18"
+  >
+    col-6 col-pull-18
   </div>
 </div>
 `;
diff --git a/components/grid/demo/basic.md b/components/grid/demo/basic.md
index be93a73f0c..5b2c3382d4 100644
--- a/components/grid/demo/basic.md
+++ b/components/grid/demo/basic.md
@@ -21,7 +21,7 @@ You can create a basic grid system by using a single set of `Row` and `Col` grid
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Row>
       <Col span={24}>col</Col>
     </Row>
@@ -40,7 +40,7 @@ ReactDOM.render(
       <Col span={6}>col-6</Col>
       <Col span={6}>col-6</Col>
     </Row>
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/grid/demo/flex-align.md b/components/grid/demo/flex-align.md
index 3cbe05311c..92f24327cb 100644
--- a/components/grid/demo/flex-align.md
+++ b/components/grid/demo/flex-align.md
@@ -14,13 +14,15 @@ title:
 Child elements vertically aligned.
 
 ```jsx
-import { Row, Col } from 'antd';
+import { Row, Col, Divider } from 'antd';
 
 const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
 
 ReactDOM.render(
-  <div>
-    <p>Align Top</p>
+  <>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      Align Top
+    </Divider>
     <Row justify="center" align="top">
       <Col span={4}>
         <DemoBox value={100}>col-4</DemoBox>
@@ -36,7 +38,9 @@ ReactDOM.render(
       </Col>
     </Row>
 
-    <p>Align Center</p>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      Align Center
+    </Divider>
     <Row justify="space-around" align="middle">
       <Col span={4}>
         <DemoBox value={100}>col-4</DemoBox>
@@ -52,7 +56,9 @@ ReactDOM.render(
       </Col>
     </Row>
 
-    <p>Align Bottom</p>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      Align Bottom
+    </Divider>
     <Row justify="space-between" align="bottom">
       <Col span={4}>
         <DemoBox value={100}>col-4</DemoBox>
@@ -67,7 +73,7 @@ ReactDOM.render(
         <DemoBox value={80}>col-4</DemoBox>
       </Col>
     </Row>
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/grid/demo/flex-order.md b/components/grid/demo/flex-order.md
index 9a32900892..ab6a985c93 100644
--- a/components/grid/demo/flex-order.md
+++ b/components/grid/demo/flex-order.md
@@ -17,22 +17,20 @@ To change the element sort by order.
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
-  <div>
-    <Row>
-      <Col span={6} order={4}>
-        1 col-order-4
-      </Col>
-      <Col span={6} order={3}>
-        2 col-order-3
-      </Col>
-      <Col span={6} order={2}>
-        3 col-order-2
-      </Col>
-      <Col span={6} order={1}>
-        4 col-order-1
-      </Col>
-    </Row>
-  </div>,
+  <Row>
+    <Col span={6} order={4}>
+      1 col-order-4
+    </Col>
+    <Col span={6} order={3}>
+      2 col-order-3
+    </Col>
+    <Col span={6} order={2}>
+      3 col-order-2
+    </Col>
+    <Col span={6} order={1}>
+      4 col-order-1
+    </Col>
+  </Row>,
   mountNode,
 );
 ```
diff --git a/components/grid/demo/flex-stretch.md b/components/grid/demo/flex-stretch.md
index 824b019a59..a543157282 100644
--- a/components/grid/demo/flex-stretch.md
+++ b/components/grid/demo/flex-stretch.md
@@ -14,26 +14,32 @@ Col 提供 `flex` 属性以支持填充。
 Col provides `flex` prop to support fill rest.
 
 ```jsx
-import { Row, Col } from 'antd';
+import { Row, Col, Divider } from 'antd';
 
 ReactDOM.render(
-  <div>
-    <p>Percentage columns</p>
+  <>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      Percentage columns
+    </Divider>
     <Row>
       <Col flex={2}>2 / 5</Col>
       <Col flex={3}>3 / 5</Col>
     </Row>
-    <p>Fill rest</p>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      Fill rest 
+    </Divider>
     <Row>
       <Col flex="100px">100px</Col>
       <Col flex="auto">Fill Rest</Col>
     </Row>
-    <p>Raw flex style</p>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      Raw flex style
+    </Divider>
     <Row>
       <Col flex="1 1 200px">1 1 200px</Col>
       <Col flex="0 1 300px">0 1 300px</Col>
     </Row>
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/grid/demo/flex.md b/components/grid/demo/flex.md
index 6638a1d0be..05b06d08c1 100644
--- a/components/grid/demo/flex.md
+++ b/components/grid/demo/flex.md
@@ -16,11 +16,13 @@ title:
 Child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node typesetting mode.
 
 ```jsx
-import { Row, Col } from 'antd';
+import { Row, Col, Divider } from 'antd';
 
 ReactDOM.render(
-  <div>
-    <p>sub-element align left</p>
+  <>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      sub-element align left
+    </Divider>
     <Row justify="start">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -28,7 +30,9 @@ ReactDOM.render(
       <Col span={4}>col-4</Col>
     </Row>
 
-    <p>sub-element align center</p>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      sub-element align center
+    </Divider>
     <Row justify="center">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -36,7 +40,9 @@ ReactDOM.render(
       <Col span={4}>col-4</Col>
     </Row>
 
-    <p>sub-element align right</p>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      sub-element align right
+    </Divider>
     <Row justify="end">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -44,7 +50,9 @@ ReactDOM.render(
       <Col span={4}>col-4</Col>
     </Row>
 
-    <p>sub-element monospaced arrangement</p>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      sub-element monospaced arrangement
+    </Divider>
     <Row justify="space-between">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -52,14 +60,16 @@ ReactDOM.render(
       <Col span={4}>col-4</Col>
     </Row>
 
-    <p>sub-element align full</p>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      sub-element align full
+    </Divider>
     <Row justify="space-around">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
     </Row>
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/grid/demo/gutter.md b/components/grid/demo/gutter.md
index 43746ac176..5e006a64a3 100644
--- a/components/grid/demo/gutter.md
+++ b/components/grid/demo/gutter.md
@@ -26,51 +26,84 @@ You can use a array to set vertical spacing, `[horizontal, vertical]` `[16, { xs
 > vertical gutter was supported after `3.24.0`.
 
 ```jsx
-import { Row, Col } from 'antd';
+import { Row, Col, Divider } from 'antd';
+
+const style = { background: '#0092ff', padding: '8px 0' };
 
 ReactDOM.render(
-  <div className="gutter-example">
+  <>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      Horizontal
+    </Divider>
     <Row gutter={16}>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">col-6</div>
+        <div style={style}>col-6</div>
       </Col>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">col-6</div>
+        <div style={style}>col-6</div>
       </Col>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">col-6</div>
+        <div style={style}>col-6</div>
       </Col>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">col-6</div>
+        <div style={style}>col-6</div>
       </Col>
     </Row>
-    <Row gutter={[{ xs: 8, sm: 16, md: 24, lg: 32 }, 20]}>
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      Responsive
+    </Divider>
+    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">col-6</div>
+        <div style={style}>col-6</div>
       </Col>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">col-6</div>
+        <div style={style}>col-6</div>
       </Col>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">col-6</div>
+        <div style={style}>col-6</div>
       </Col>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">col-6</div>
+        <div style={style}>col-6</div>
       </Col>
     </Row>
-  </div>,
+    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
+      Vertical
+    </Divider>
+    <Row gutter={[16, 24]}>
+      <Col className="gutter-row" span={6}>
+        <div style={style}>col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div style={style}>col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div style={style}>col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div style={style}>col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div style={style}>col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div style={style}>col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div style={style}>col-6</div>
+      </Col>
+      <Col className="gutter-row" span={6}>
+        <div style={style}>col-6</div>
+      </Col>
+    </Row>
+  </>,
   mountNode,
 );
 ```
 
 ```css
-.gutter-example .ant-row > div {
-  background: transparent;
-  border: 0;
-}
 .gutter-box {
+  padding: 8px 0;
   background: #00a0e9;
-  padding: 5px 0;
 }
 ```
 
diff --git a/components/grid/demo/offset.md b/components/grid/demo/offset.md
index a67e050fce..5f3e1a5fc6 100644
--- a/components/grid/demo/offset.md
+++ b/components/grid/demo/offset.md
@@ -19,7 +19,7 @@ title:
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Row>
       <Col span={8}>col-8</Col>
       <Col span={8} offset={8}>
@@ -39,7 +39,7 @@ ReactDOM.render(
         col-12 col-offset-6
       </Col>
     </Row>
-  </div>,
+  </>,
   mountNode,
 );
 ```
diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md
index 35244ad818..f6267b3446 100644
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@@ -67,47 +67,45 @@ class App extends React.Component {
       colCode += `  <Col span={${24 / colCount}} />\n`;
     }
     return (
-      <div>
-        <div style={{ marginBottom: 16 }}>
-          <span style={{ marginRight: 6 }}>Horizontal Gutter (px): </span>
-          <div style={{ width: '50%' }}>
-            <Slider
-              min={0}
-              max={Object.keys(this.gutters).length - 1}
-              value={gutterKey}
-              onChange={this.onGutterChange}
-              marks={this.gutters}
-              step={null}
-            />
-          </div>
-          <span style={{ marginRight: 6 }}>Vertical Gutter (px): </span>
-          <div style={{ width: '50%' }}>
-            <Slider
-              min={0}
-              max={Object.keys(this.vgutters).length - 1}
-              value={vgutterKey}
-              onChange={this.onVGutterChange}
-              marks={this.vgutters}
-              step={null}
-            />
-          </div>
-          <span style={{ marginRight: 6 }}>Column Count:</span>
-          <div style={{ width: '50%' }}>
-            <Slider
-              min={0}
-              max={Object.keys(this.colCounts).length - 1}
-              value={colCountKey}
-              onChange={this.onColCountChange}
-              marks={this.colCounts}
-              step={null}
-            />
-          </div>
+      <>
+        <span style={{ marginRight: 6 }}>Horizontal Gutter (px): </span>
+        <div style={{ width: '50%' }}>
+          <Slider
+            min={0}
+            max={Object.keys(this.gutters).length - 1}
+            value={gutterKey}
+            onChange={this.onGutterChange}
+            marks={this.gutters}
+            step={null}
+          />
+        </div>
+        <span style={{ marginRight: 6 }}>Vertical Gutter (px): </span>
+        <div style={{ width: '50%' }}>
+          <Slider
+            min={0}
+            max={Object.keys(this.vgutters).length - 1}
+            value={vgutterKey}
+            onChange={this.onVGutterChange}
+            marks={this.vgutters}
+            step={null}
+          />
+        </div>
+        <span style={{ marginRight: 6 }}>Column Count:</span>
+        <div style={{ width: '50%', marginBottom: 48 }}>
+          <Slider
+            min={0}
+            max={Object.keys(this.colCounts).length - 1}
+            value={colCountKey}
+            onChange={this.onColCountChange}
+            marks={this.colCounts}
+            step={null}
+          />
         </div>
         <Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
         <Row gutter={[this.gutters[gutterKey], this.vgutters[vgutterKey]]}>{cols}</Row>
         <pre>{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
         <pre>{`<Row gutter={[${this.gutters[gutterKey]}, ${this.vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
-      </div>
+      </>
     );
   }
 }
@@ -121,16 +119,17 @@ ReactDOM.render(<App />, mountNode);
   border: 0;
 }
 #components-grid-demo-playground [class~='ant-col'] > div {
-  background: #00a0e9;
   height: 120px;
+  font-size: 14px;
   line-height: 120px;
-  font-size: 13px;
+  background: #0092ff;
+  border-radius: 4px;
 }
 #components-grid-demo-playground pre {
+  padding: 8px 16px;
+  font-size: 13px;
   background: #f9f9f9;
   border-radius: 6px;
-  font-size: 13px;
-  padding: 8px 16px;
 }
 ```
 
diff --git a/components/grid/demo/sort.md b/components/grid/demo/sort.md
index dcd9a4bedc..2a3cbcf63a 100644
--- a/components/grid/demo/sort.md
+++ b/components/grid/demo/sort.md
@@ -19,16 +19,14 @@ By using `push` and`pull` class you can easily change column order.
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
-  <div>
-    <Row>
-      <Col span={18} push={6}>
-        col-18 col-push-6
-      </Col>
-      <Col span={6} pull={18}>
-        col-6 col-pull-18
-      </Col>
-    </Row>
-  </div>,
+  <Row>
+    <Col span={18} push={6}>
+      col-18 col-push-6
+    </Col>
+    <Col span={6} pull={18}>
+      col-6 col-pull-18
+    </Col>
+  </Row>,
   mountNode,
 );
 ```
diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less
index 6db7a542a6..7e366eb687 100644
--- a/site/theme/static/markdown.less
+++ b/site/theme/static/markdown.less
@@ -128,7 +128,7 @@
 }
 
 .markdown pre {
-  font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-family: @code-family;
   background: @site-markdown-code-bg;
   border-radius: @border-radius-base;
 }
@@ -193,7 +193,7 @@
 .markdown .anchor {
   margin-left: 8px;
   opacity: 0;
-  transition: opacity 0.3s ease;
+  transition: opacity .3s;
 
   .ant-row-rtl & {
     margin-right: 8px;
@@ -298,6 +298,8 @@
   }
 }
 
+@demo-grid-color: #0092ff;
+
 .grid-demo,
 [id^='components-grid-demo-'] {
   .demo-row,
@@ -359,16 +361,15 @@
     min-height: 30px;
     margin-top: 8px;
     margin-bottom: 8px;
-    padding: 5px 0;
     color: #fff;
     text-align: center;
     border-radius: 0;
   }
   .code-box-demo .ant-row > div:not(.gutter-row) {
     padding: 16px 0;
-    background: #00a0e9;
+    background: @demo-grid-color;
     &:nth-child(2n + 1) {
-      background: fade(#00a0e9, 70%);
+      background: fade(@demo-grid-color, 75%);
     }
   }
   .ant-row .demo-col,
@@ -382,11 +383,11 @@
     border: none;
   }
   .ant-row .demo-col-1 {
-    background: fade(#00a0e9, 70%);
+    background: fade(@demo-grid-color, 75%);
   }
   .ant-row .demo-col-2,
   .code-box-demo .ant-row .demo-col-2 {
-    background: fade(#00a0e9, 50%);
+    background: fade(@demo-grid-color, 50%);
   }
   .ant-row .demo-col-3,
   .code-box-demo .ant-row .demo-col-3 {
@@ -395,7 +396,7 @@
   }
   .ant-row .demo-col-4,
   .code-box-demo .ant-row .demo-col-4 {
-    background: fade(#00a0e9, 60%);
+    background: fade(@demo-grid-color, 60%);
   }
   .ant-row .demo-col-5,
   .code-box-demo .ant-row .demo-col-5 {