diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md
index f425ed7482..4273b79542 100644
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@@ -4,7 +4,7 @@
 
 从堆叠到水平排列。
 
-使用单一的一组 `.col-*` 栅格类，就可以创建一个基本的栅格系统，所有列（column）必须放在 `.row` 内。
+使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。
 
 ---
 
@@ -17,10 +17,10 @@ ReactDOM.render(
       <Col span="12">.col-12</Col>
       <Col span="12">.col-12</Col>
     </Row>
-    <Row className="testRowClassName">
+    <Row>
+      <Col span="8">.col-8</Col>
       <Col span="8">.col-8</Col>
       <Col span="8">.col-8</Col>
-      <Col span="8" className="testColClassName">.col-8</Col>
     </Row>
     <Row>
       <Col span="6">.col-6</Col>
@@ -32,12 +32,3 @@ ReactDOM.render(
   mountNode
 );
 ````
-
-<style>
-.testRowClassName {
-	background: #f0f0f0;
-}
-div.testColClassName {
-	background: rgba(24, 115, 216, 0.9);
-}
-</style>
diff --git a/components/layout/demo/gutter.md b/components/layout/demo/gutter.md
new file mode 100644
index 0000000000..ef1e11dfe5
--- /dev/null
+++ b/components/layout/demo/gutter.md
@@ -0,0 +1,46 @@
+# 区块间隔
+
+- order: 6
+
+栅格常常需要和间隔进行配置，我们推荐使用 `(16+8n)px` 作为栅格间隔。
+
+---
+
+````jsx
+import { Row, Col } from 'antd';
+
+ReactDOM.render(
+  <div className="gutter-example">
+    <Row gutter={16}>
+      <Col span="6">
+        <div className="gutter-box">.col-6</div>
+      </Col>
+      <Col span="6">
+        <div className="gutter-box">.col-6</div>
+      </Col>
+      <Col span="6">
+        <div className="gutter-box">.col-6</div>
+      </Col>
+      <Col span="6">
+        <div className="gutter-box">.col-6</div>
+      </Col>
+    </Row>
+  </div>
+, mountNode);
+````
+
+````css
+.gutter-example {
+  background: #f4f4f4;
+}
+.gutter-example .row > div {
+  background: transparent;
+  border: 0;
+}
+.gutter-box {
+  background: #2db7f5;
+  height: 80px;
+  line-height: 80px;
+  border-radius: 6px;
+}
+````
diff --git a/components/layout/index.md b/components/layout/index.md
index 2101e4a732..9ac8ed9e81 100644
--- a/components/layout/index.md
+++ b/components/layout/index.md
@@ -11,6 +11,7 @@
 
 ## 设计理念
 
+<div style="width:80%">
 <div class="row demo-row">
   <div class="col-24 demo-col demo-col-1">
     100%
@@ -57,10 +58,11 @@
     33.33%
   </div>
 </div>
+</div>
 
-在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在12栅格系统的基础上，我们将整个设计建议区域按照24等分的原则进行划分。
+在多数业务情况下，Ant Design需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。
 
-划分之后的信息区块我们称之为“盒子”。建议横向排列的盒子数量最多四个，最少一个。“盒子”在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
+划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。
 
 ## 概述
 
@@ -69,29 +71,31 @@
 * 通过`row`在水平方向建立一组`column`（简写col）
 * 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
 * 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建
-* 如果一个`row`中的`col`总和超过24，那么多余的`col`会作为一个整体另起一行排列
+* 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列
 
 ## Flex 布局
 
 我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
 
-Flex 布局是基于 24 栅格来定义每一个“盒子”的宽度，但排版则不拘泥于栅格。
+Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但排版则不拘泥于栅格。
 
 <style>
 .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;
+  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;
 }
+
 .row-flex {
   background: #F5F5F5;
 }
 
-.row div,
-.row-flex div {
+.row > div,
+.row-flex > div {
   padding: 5px 0;
-  background: rgba(24, 115, 216, 0.7);
   text-align: center;
-  min-height: 28px;
+  border-radius: 6px;
+  min-height: 30px;
+  background: #6AC2F5;
   border: 1px solid rgba(0, 0, 0, 0.1);
   margin-top: 10px;
   margin-bottom: 10px;
@@ -108,17 +112,17 @@ Flex 布局是基于 24 栅格来定义每一个“盒子”的宽度，但排
   margin-bottom: 0;
 }
 .row .demo-col-1 {
-  background: rgba(24, 115, 216, 0.7);
+  background: rgba(29, 128, 211, 0.7);
 }
 .row .demo-col-2 {
-  background: rgba(24, 115, 216, 0.5);
+  background: rgba(29, 128, 211, 0.5);
 }
 .row .demo-col-3 {
   background: rgba(255, 255, 255, 0.2);
   color: #999;
 }
 .row .demo-col-4 {
-  background: rgba(24, 115, 216, 0.6);
+  background: rgba(29, 128, 211, 0.6);
 }
 .row .demo-col-5 {
   background: rgba(255, 255, 255, 0.5);
diff --git a/components/layout/row.jsx b/components/layout/row.jsx
index e3934fb820..a9181142e5 100644
--- a/components/layout/row.jsx
+++ b/components/layout/row.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Children, cloneElement } from 'react';
 import classNames from 'classnames';
 
 const Row = React.createClass({
@@ -8,9 +8,15 @@ const Row = React.createClass({
     justify: React.PropTypes.string,
     className: React.PropTypes.string,
     children: React.PropTypes.node,
+    gutter: React.PropTypes.number,
+  },
+  getDefaultProps() {
+    return {
+      gutter: 0,
+    };
   },
   render() {
-    const { type, justify, align, className, ...others } = this.props;
+    const { type, justify, align, className, gutter, style, children, ...others } = this.props;
     const classes = classNames({
       row: true,
       [`row-${type}`]: type,
@@ -18,7 +24,20 @@ const Row = React.createClass({
       [`row-${type}-${align}`]: align,
       [className]: className,
     });
-    return <div {...others} className={classes}>{ this.props.children }</div>;
+    const rowStyle = gutter > 0 ? {
+      marginLeft: gutter / -2,
+      marginRight: gutter / -2,
+      ...style,
+    } : style;
+    const cols = Children.map(children, col =>
+      cloneElement(col, {
+        style: gutter > 0 ? {
+          paddingLeft: gutter / 2,
+          paddingRight: gutter / 2,
+        } : null
+      })
+    );
+    return <div {...others} className={classes} style={rowStyle}>{cols}</div>;
   },
 });