docs(translation): translation for layout (ant-design#2635)

components/layout/demo/basic.md

@@ -1,12 +1,22 @@
 ---
 order: 0
-title: 基础布局
+title:
+  zh-CN: 基础布局
+  en-US: Basic Layout
 ---
 
+## zh-CN
+
 从堆叠到水平排列。
 
 使用单一的一组 `Row` 和 `Col` 栅格组件，就可以创建一个基本的栅格系统，所有列（Col）必须放在 `Row` 内。
 
+## en-US
+
+From the stack to the horizontal arrangement.
+
+You can create a basic grid system by using a single set of `Row` and` Col` grid assembly, ,all of the columns (Col) must be placed in `Row`.
+
 ````jsx
 import { Row, Col } from 'antd';
 

components/layout/demo/flex-align.md

@@ -1,34 +1,42 @@
 ---
 order: 5
-title: Flex 对齐
+title:
+  zh-CN: Flex 对齐
+  en-US: Flex Alignment
 ---
 
+## zh-CN
+
 Flex 子元素垂直对齐。
 
+## en-US
+
+Flex child elements vertically aligned.
+
 ````jsx
 import { Row, Col } from 'antd';
 
 const DemoBox = props => <p className={`height-${props.value}`}>{props.children}</p>;
 
 ReactDOM.render(
   <div>
-    <p>顶部对齐</p>
+    <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>
     </Row>
 
-    <p>居中对齐</p>
+    <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>
     </Row>
 
-    <p>底部对齐</p>
+    <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>

components/layout/demo/flex-order.md

@@ -1,10 +1,18 @@
 ---
 order: 6
-title: Flex 排序
+title: 
+  zh-CN: Flex 排序
+  en-US: Flex Order
 ---
 
+## zh-CN
+
 通过 Flex 布局的 Order 来改变元素的排序。
 
+## en-US
+
+To change the element sort by Flex layout order.
+
 ````jsx
 import { Row, Col } from 'antd';
 

components/layout/demo/flex.md

@@ -1,50 +1,58 @@
 ---
 order: 4
-title: Flex 布局
+title: 
+  zh-CN: Flex 布局
+  en-US: Flex Layout
 ---
 
+## zh-CN
+
 Flex 布局基础。
 
 使用 `row-flex` 定义 `flex` 布局，其子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
 
+## en-US
+
+Use `row-flex` define` flex` layout, its child elements depending on the value of the `start`,` center`, `end`,` space-between`, `space-around`, which are defined in its parent node layout mode.
+
 ````jsx
 import { Row, Col } from 'antd';
 
 ReactDOM.render(
   <div>
-    <p>子元素居左排列</p>
+    <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>
     </Row>
 
-    <p>子元素居中排列</p>
+    <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>
     </Row>
 
-    <p>子元素居右排列</p>
+    <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>
     </Row>
 
-    <p>子元素等宽排列</p>
+    <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>
     </Row>
 
-    <p>子元素分散对齐</p>
+    <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>

components/layout/demo/gutter.md

@@ -1,10 +1,18 @@
 ---
 order: 1
-title: 区块间隔
+title: 
+  zh-CN: 区块间隔
+  en-US: Block Interval
 ---
 
+## zh-CN
+
 栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。
 
+## 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.
+
 ````jsx
 import { Row, Col } from 'antd';
 

components/layout/demo/offset.md

@@ -1,12 +1,23 @@
 ---
 order: 2
-title: 左右偏移
+title: 
+  zh-CN: 左右偏移
+  en-US: Offset
 ---
 
+## zh-CN
+
 列偏移。
 
 使用 `offset` 可以将列向右侧偏。例如，`offset={4}` 将元素向右侧偏移了 4 个列（column）的宽度。
 
+## en-US
+
+`Offset` can set the column to the right side. For example, using `offset = {4}` can set the element shifted to the right four columns width.
+
+Column offset.
+
+
 ````jsx
 import { Row, Col } from 'antd';
 

components/layout/demo/reponsive-more.md

@@ -1,12 +1,21 @@
 ---
 order: 8
-title: 其他属性的响应式
+title: 
+  zh-CN: 其他属性的响应式
+  en-US: More responsive
 ---
 
+## zh-CN
+
 `span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` 属性中来使用。
 
 其中 `xs={6}` 相当于 `xs={{ span: 6 }}`。
 
+## en-US
+
+`Span`` pull` `push`` offset` `order` property can be embedded into` xs` `sm`` md` `lg` properties to use,
+where `xs = {6}` is equivalent to `xs = {{span: 6}}`.
+
 ````jsx
 import { Row, Col } from 'antd';
 

components/layout/demo/reponsive.md

@@ -1,10 +1,18 @@
 ---
 order: 7
-title: 响应式布局
+title: 
+  zh-CN: 响应式布局
+  en-US: Responsive
 ---
 
+## zh-CN
+
 参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设四个响应尺寸：`xs` `sm` `md` `lg`。
 
+## en-US
+
+Referring to the Bootstrap [responsive design] (http://getbootstrap.com/css/#grid-media-queries), here preset four dimensions: `xs`` sm` `md`` lg`.
+
 ````jsx
 import { Row, Col } from 'antd';
 

components/layout/demo/sort.md

@@ -1,12 +1,20 @@
 ---
 order: 3
-title: 布局排序
+title: 
+  zh-CN: 布局排序
+  en-US: Layout sort
 ---
 
+## zh-CN
+
 列排序。
 
 通过使用 `push` 和 `pull` 类就可以很容易的改变列（column）的顺序。
 
+## en-US
+
+By using `push` and` pull` class you can easily change column order.
+
 ````jsx
 import { Row, Col } from 'antd';
 

components/layout/index.en-US.md

@@ -0,0 +1,106 @@
+---
+category: Components
+type: Basic
+cols: 1
+english: Layout
+---
+
+24 Grids System。
+
+## Design concept
+
+<div class="layout-demo">
+<div class="row demo-row">
+  <div class="col-24 demo-col demo-col-1">
+    100%
+  </div>
+</div>
+<div class="row demo-row">
+  <div class="col-6 demo-col demo-col-2">
+    25%
+  </div>
+  <div class="col-6 demo-col demo-col-3">
+    25%
+  </div>
+  <div class="col-6 demo-col demo-col-2">
+    25%
+  </div>
+  <div class="col-6 demo-col demo-col-3">
+    25%
+  </div>
+</div>
+<div class="row demo-row">
+  <div class="col-8 demo-col demo-col-4">
+    33.33%
+  </div>
+  <div class="col-8 demo-col demo-col-5">
+    33.33%
+  </div>
+  <div class="col-8 demo-col demo-col-4">
+    33.33%
+  </div>
+</div>
+<div class="row demo-row">
+  <div class="col-12 demo-col demo-col-1">
+    50%
+  </div>
+  <div class="col-12 demo-col demo-col-3">
+    50%
+  </div>
+</div>
+<div class="row demo-row">
+  <div class="col-16 demo-col demo-col-4">
+    66.66%
+  </div>
+  <div class="col-8 demo-col demo-col-5">
+    33.33%
+  </div>
+</div>
+</div>
+
+In most business situations,Ant Design need solve a lot of information storage problems within the design area,so based on 12 Grids System,we divided the design area into 24 aliquots.
+
+We name the divided area as 'box'.We suggest that four boxes horizontal arrangement at most, one at least.Box on the proportion of the entire screen as above picture.To ensure that the level of visual comfort,we custom typography inside of the box based on the box unit.
+
+## Outline
+
+In the grid system, we define the frame outside the information area based on row and colum,to ensure that every area can steady arrangement.
+
+Following is a brief look at how it works:
+
+* To establish a set of `column` in the horizontal direction by` row` (abbreviated col)
+* Direct your content elements should be placed in the `col`, and only` col` as the `row`
+* The column grid system is a value of 1-24 to represent its range spans.For example, three columns of equal width can be created by `.col-8`.
+* If a `row` sum of` col` more than 24, then the extra `col` as a whole will start a new line arrangement.
+
+## Flex layout
+
+Our grid systems support Flex layout to allow the child elements within the parent horizontal alignment - Left, center, right of abode, and other wide arrangement, decentralized arrangement. Between sub-elements and sub-elements, support the top of the aligned vertically centered, bottom-aligned manner. At the same time, you can define the order of elements by using 'order'.
+
+Flex layout is based on a grid 24 to define each "box" in width, but not rigidly adhere to the grid layout.
+
+## API
+
+Ant Design layout component if it can not meet your needs, you can use the excellent layout of the components of the community:
+
+- [react-flexbox-grid](http://roylee0704.github.io/react-flexbox-grid/)
+- [react-blocks](http://whoisandie.github.io/react-blocks/)
+
+### Row
+
+| Member        | Explanation             | Type               | Default       |
+|------------|-----------------|--------------------|-------------|
+| gutter     | grid spacing   | number | 0        |
+| type     | layout mode, the optional `flex`, effective modern browser | string |         |
+| align     | the vertical alignment of the layout of flex: `top`` middle` `bottom`  | string | `top`      |
+| justify   | horizontal arrangement of the layout of flex: `start`` end` `center`` space-around` `space-between`   | string | `start`        |
+
+### Col
+
+| Member        | Explanation             | Type               | Default       |
+|------------|-----------------|--------------------|-------------|
+| span     | raster occupying the number of cells,0 corresponds to `display: none`  | number | none        |
+| order     | raster order, under `flex` effective layout mode   | number | 0        |
+| offset     | the number of cells to the left of the grid spacing, no cell in grid spaceing  | number | 0        |
+| push     | the number of cells that raster move to the right | number | 0        |
+| pull     | the number of cells that raster move to the left   | number | 0        |