diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md
index 75c2c23a99..1778d70749 100644
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@@ -23,19 +23,19 @@ import { Row, Col } from 'antd';
 ReactDOM.render(
   <div>
     <Row>
-      <Col span={12}>.ant-col-12</Col>
-      <Col span={12}>.ant-col-12</Col>
+      <Col span={12}>col-12</Col>
+      <Col span={12}>col-12</Col>
     </Row>
     <Row>
-      <Col span={8}>.ant-col-8</Col>
-      <Col span={8}>.ant-col-8</Col>
-      <Col span={8}>.ant-col-8</Col>
+      <Col span={8}>col-8</Col>
+      <Col span={8}>col-8</Col>
+      <Col span={8}>col-8</Col>
     </Row>
     <Row>
-      <Col span={6}>.ant-col-6</Col>
-      <Col span={6}>.ant-col-6</Col>
-      <Col span={6}>.ant-col-6</Col>
-      <Col span={6}>.ant-col-6</Col>
+      <Col span={6}>col-6</Col>
+      <Col span={6}>col-6</Col>
+      <Col span={6}>col-6</Col>
+      <Col span={6}>col-6</Col>
     </Row>
   </div>,
   mountNode
diff --git a/components/layout/demo/flex-align.md b/components/layout/demo/flex-align.md
index 24cee64d12..483b3b5dee 100644
--- a/components/layout/demo/flex-align.md
+++ b/components/layout/demo/flex-align.md
@@ -22,26 +22,26 @@ ReactDOM.render(
   <div>
     <p>Align Top</p>
     <Row type="flex" justify="center" align="top">
-      <Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
     </Row>
 
     <p>Align Center</p>
     <Row type="flex" justify="space-around" align="middle">
-      <Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
     </Row>
 
     <p>Align Bottom</p>
     <Row type="flex" justify="space-between" align="bottom">
-      <Col span={4}><DemoBox value={100}>.ant-col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={50}>.ant-col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={120}>.ant-col-4</DemoBox></Col>
-      <Col span={4}><DemoBox value={80}>.ant-col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={100}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={50}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={120}>col-4</DemoBox></Col>
+      <Col span={4}><DemoBox value={80}>col-4</DemoBox></Col>
     </Row>
   </div>,
   mountNode
diff --git a/components/layout/demo/flex.md b/components/layout/demo/flex.md
index a5207de221..8f3b5330f5 100644
--- a/components/layout/demo/flex.md
+++ b/components/layout/demo/flex.md
@@ -1,6 +1,6 @@
 ---
 order: 4
-title: 
+title:
   zh-CN: Flex 布局
   en-US: Flex Layout
 ---
@@ -22,42 +22,42 @@ ReactDOM.render(
   <div>
     <p>sub-element align left</p>
     <Row type="flex" justify="start">
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
+      <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>
 
     <p>sub-element align center</p>
     <Row type="flex" justify="center">
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
+      <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>
 
     <p>sub-element align right</p>
     <Row type="flex" justify="end">
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
+      <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>
 
     <p>sub-element monospaced arrangement</p>
     <Row type="flex" justify="space-between">
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
+      <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>
 
     <p>sub-element align full</p>
     <Row type="flex" justify="space-around">
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
-      <Col span={4}>.ant-col-4</Col>
+      <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/layout/demo/gutter.md b/components/layout/demo/gutter.md
index 1d0d01fde4..d3ad480fd5 100644
--- a/components/layout/demo/gutter.md
+++ b/components/layout/demo/gutter.md
@@ -1,8 +1,8 @@
 ---
 order: 1
-title: 
+title:
   zh-CN: 区块间隔
-  en-US: Block Interval
+  en-US: Grid Gutter
 ---
 
 ## zh-CN
@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-Raster intervals and often need to cooperate, you can use the `gutter`` Row` property, we recommend using `(16 + 8n) px` as grid spacing.
+You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`.
 
 ````jsx
 import { Row, Col } from 'antd';
@@ -20,16 +20,16 @@ ReactDOM.render(
   <div className="gutter-example">
     <Row gutter={16}>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">.ant-col-6</div>
+        <div className="gutter-box">col-6</div>
       </Col>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">.ant-col-6</div>
+        <div className="gutter-box">col-6</div>
       </Col>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">.ant-col-6</div>
+        <div className="gutter-box">col-6</div>
       </Col>
       <Col className="gutter-row" span={6}>
-        <div className="gutter-box">.ant-col-6</div>
+        <div className="gutter-box">col-6</div>
       </Col>
     </Row>
   </div>
@@ -42,9 +42,6 @@ ReactDOM.render(
   border: 0;
 }
 .gutter-box {
-  background: #2db7f5;
-  height: 80px;
-  line-height: 80px;
-  border-radius: 6px;
+  background: #00A0E9;
 }
 ````
diff --git a/components/layout/demo/offset.md b/components/layout/demo/offset.md
index 307b7c69d7..ca91276872 100644
--- a/components/layout/demo/offset.md
+++ b/components/layout/demo/offset.md
@@ -24,15 +24,15 @@ import { Row, Col } from 'antd';
 ReactDOM.render(
   <div>
     <Row>
-      <Col span={8}>.ant-col-8</Col>
-      <Col span={8} offset={8}>.ant-col-8</Col>
+      <Col span={8}>col-8</Col>
+      <Col span={8} offset={8}>col-8</Col>
     </Row>
     <Row>
-      <Col span={6} offset={6}>.ant-col-6 .ant-col-offset-6</Col>
-      <Col span={6} offset={6}>.ant-col-6 .ant-col-offset-6</Col>
+      <Col span={6} offset={6}>col-6 col-offset-6</Col>
+      <Col span={6} offset={6}>col-6 col-offset-6</Col>
     </Row>
     <Row>
-      <Col span={12} offset={6}>.ant-col-12 .ant-col-offset-6</Col>
+      <Col span={12} offset={6}>col-12 col-offset-6</Col>
     </Row>
   </div>,
   mountNode
diff --git a/components/layout/demo/reponsive-more.md b/components/layout/demo/reponsive-more.md
index c2508e117c..cd7c1e23f3 100644
--- a/components/layout/demo/reponsive-more.md
+++ b/components/layout/demo/reponsive-more.md
@@ -1,6 +1,6 @@
 ---
 order: 8
-title: 
+title:
   zh-CN: 其他属性的响应式
   en-US: More responsive
 ---
@@ -21,9 +21,9 @@ import { Row, Col } from 'antd';
 
 ReactDOM.render(
   <Row>
-    <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }} />
-    <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }} />
-    <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }} />
+    <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
+    <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
+    <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
   </Row>
 , mountNode);
 ````
diff --git a/components/layout/demo/reponsive.md b/components/layout/demo/reponsive.md
index 71986d9ada..a417fdcc93 100644
--- a/components/layout/demo/reponsive.md
+++ b/components/layout/demo/reponsive.md
@@ -1,6 +1,6 @@
 ---
 order: 7
-title: 
+title:
   zh-CN: 响应式布局
   en-US: Responsive
 ---
@@ -18,9 +18,9 @@ import { Row, Col } from 'antd';
 
 ReactDOM.render(
   <Row>
-    <Col xs={2} sm={4} md={6} lg={8} />
-    <Col xs={20} sm={16} md={12} lg={8} />
-    <Col xs={2} sm={4} md={6} lg={8} />
+    <Col xs={2} sm={4} md={6} lg={8}>Col</Col>
+    <Col xs={20} sm={16} md={12} lg={8}>Col</Col>
+    <Col xs={2} sm={4} md={6} lg={8}>Col</Col>
   </Row>
 , mountNode);
 ````
diff --git a/components/layout/demo/sort.md b/components/layout/demo/sort.md
index b63719e62e..2aa963e15a 100644
--- a/components/layout/demo/sort.md
+++ b/components/layout/demo/sort.md
@@ -21,8 +21,8 @@ import { Row, Col } from 'antd';
 ReactDOM.render(
   <div>
     <Row>
-      <Col span={18} push={6}>.ant-col-18 .ant-col-push-6</Col>
-      <Col span={6} pull={18}>.ant-col-6 .ant-col-pull-18</Col>
+      <Col span={18} push={6}>col-18 col-push-6</Col>
+      <Col span={6} pull={18}>col-6 col-pull-18</Col>
     </Row>
   </div>,
   mountNode
diff --git a/site/theme/static/markdown.less b/site/theme/static/markdown.less
index d6d5573890..015882a728 100644
--- a/site/theme/static/markdown.less
+++ b/site/theme/static/markdown.less
@@ -213,6 +213,7 @@
   .code-box-demo .demo-row {
     background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%,  transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%,  transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
     overflow: hidden;
+    margin-bottom: 8px;
   }
   .ant-row-flex,
   .code-box-demo .ant-row-flex {
@@ -224,21 +225,24 @@
   .code-box-demo .ant-row-flex > div {
     padding: 5px 0;
     text-align: center;
-    border-radius: 6px;
+    border-radius: 0;
     min-height: 30px;
-    margin-top: 10px;
-    margin-bottom: 10px;
+    margin-top: 8px;
+    margin-bottom: 8px;
     color: #fff;
   }
   .code-box-demo .ant-row > div:not(.gutter-row),
   .code-box-demo .ant-row-flex > div:not(.gutter-row) {
-    background: #6AC2F5;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    background: #00A0E9;
+    padding: 16px 0;
+    &:nth-child(2n+1) {
+      background: fade(#00A0E9, 70%);
+    }
   }
   .ant-row .demo-col,
   .code-box-demo .ant-row .demo-col {
     text-align: center;
-    padding: 40px 0;
+    padding: 30px 0;
     color: #fff;
     font-size: 18px;
     border: none;
@@ -247,11 +251,11 @@
   }
   .ant-row .demo-col-1,
   .ant-row .demo-col-1 {
-    background: rgba(29, 128, 211, 0.7);
+    background: fade(#00A0E9, 70%);
   }
   .ant-row .demo-col-2,
   .code-box-demo .ant-row .demo-col-2 {
-    background: rgba(29, 128, 211, 0.5);
+    background: fade(#00A0E9, 50%);
   }
   .ant-row .demo-col-3,
   .code-box-demo .ant-row .demo-col-3{
@@ -260,7 +264,7 @@
   }
   .ant-row .demo-col-4,
   .code-box-demo .ant-row .demo-col-4 {
-    background: rgba(29, 128, 211, 0.6);
+    background: fade(#00A0E9, 60%);
   }
   .ant-row .demo-col-5,
   .code-box-demo .ant-row .demo-col-5 {
@@ -269,15 +273,19 @@
   }
   .code-box-demo .height-100 {
     height: 100px;
+    line-height: 100px;
   }
   .code-box-demo .height-50 {
     height: 50px;
+    line-height: 50px;
   }
   .code-box-demo .height-120 {
     height: 120px;
+    line-height: 120px;
   }
   .code-box-demo .height-80 {
     height: 80px;
+    line-height: 80px;
   }
 }