From c8e15966f7b55ecfa5d00de2164421e29729285e Mon Sep 17 00:00:00 2001
From: liumeo <liumeo@pku.edu.cn>
Date: Thu, 2 Jan 2020 22:40:12 +0800
Subject: [PATCH] grid-zhcn

---
 .../components/grid/zhCN/basic.md             | 27 ++++++++++++
 .../components/grid/zhCN/gutter.md            | 41 +++++++++++++++++++
 .../components/grid/zhCN/index.md             |  8 ++++
 .../components/grid/zhCN/offset.md            | 21 ++++++++++
 .../components/grid/zhCN/pushPull.md          | 27 ++++++++++++
 5 files changed, 124 insertions(+)
 create mode 100644 demo/documentation/components/grid/zhCN/basic.md
 create mode 100644 demo/documentation/components/grid/zhCN/gutter.md
 create mode 100644 demo/documentation/components/grid/zhCN/offset.md
 create mode 100644 demo/documentation/components/grid/zhCN/pushPull.md

diff --git a/demo/documentation/components/grid/zhCN/basic.md b/demo/documentation/components/grid/zhCN/basic.md
new file mode 100644
index 000000000..187c87d56
--- /dev/null
+++ b/demo/documentation/components/grid/zhCN/basic.md
@@ -0,0 +1,27 @@
+# 基础
+```html
+<n-row :gutter="12">
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+</n-row>
+```
+```css
+.red {
+  height: 108px;
+  background-color: rgba(128, 0, 0, .5);
+}
+.green {
+  height: 108px;
+  background-color: rgba(0, 128, 0, .5);
+}
+```
diff --git a/demo/documentation/components/grid/zhCN/gutter.md b/demo/documentation/components/grid/zhCN/gutter.md
new file mode 100644
index 000000000..65d1d1817
--- /dev/null
+++ b/demo/documentation/components/grid/zhCN/gutter.md
@@ -0,0 +1,41 @@
+# 间隔
+```html
+<n-row :gutter="[12, 8]">
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+</n-row>
+<n-row :gutter="[12, 8]">
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+</n-row>
+```
+```css
+.red {
+  height: 108px;
+  background-color: rgba(128, 0, 0, .5);
+}
+.green {
+  height: 108px;
+  background-color: rgba(0, 128, 0, .5);
+}
+```
diff --git a/demo/documentation/components/grid/zhCN/index.md b/demo/documentation/components/grid/zhCN/index.md
index e69de29bb..144023946 100644
--- a/demo/documentation/components/grid/zhCN/index.md
+++ b/demo/documentation/components/grid/zhCN/index.md
@@ -0,0 +1,8 @@
+# 栅格
+<!--single-column-->
+```demo
+basic
+gutter
+offset
+push-pull
+```
diff --git a/demo/documentation/components/grid/zhCN/offset.md b/demo/documentation/components/grid/zhCN/offset.md
new file mode 100644
index 000000000..4b87b73de
--- /dev/null
+++ b/demo/documentation/components/grid/zhCN/offset.md
@@ -0,0 +1,21 @@
+# 偏移 
+```html
+<n-row :gutter="12">
+  <n-col :span="6" :offset="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6" :offset="6">
+    <div class="green"></div>
+  </n-col>
+</n-row>
+```
+```css
+.red {
+  height: 108px;
+  background-color: rgba(128, 0, 0, .5);
+}
+.green {
+  height: 108px;
+  background-color: rgba(0, 128, 0, .5);
+}
+```
diff --git a/demo/documentation/components/grid/zhCN/pushPull.md b/demo/documentation/components/grid/zhCN/pushPull.md
new file mode 100644
index 000000000..dd7e79998
--- /dev/null
+++ b/demo/documentation/components/grid/zhCN/pushPull.md
@@ -0,0 +1,27 @@
+# 排序
+```html
+<n-row :gutter="12">
+  <n-col :span="6" :push="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6" :pull="6">
+    <div class="green"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="red"></div>
+  </n-col>
+  <n-col :span="6">
+    <div class="green"></div>
+  </n-col>
+</n-row>
+```
+```css
+.red {
+  height: 108px;
+  background-color: rgba(128, 0, 0, .5);
+}
+.green {
+  height: 108px;
+  background-color: rgba(0, 128, 0, .5);
+}
+```