From fb0bce1570ab6aaeb86835ebeb0e2eb9eff7b307 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E5=90=9B=E5=81=A5?= <40288193@qq.com>
Date: Wed, 15 Nov 2023 10:33:33 +0800
Subject: [PATCH] docs(laylout): Optimize Layout's docs and demos (#806)

* docs(laylout): Optimize Layout's docs and demos

* docs(laylout): Optimize Layout's docs and demos

* fix(less): fix conflict
---
 .../pc/app/layout/base-composition-api.vue    |  65 ----
 examples/sites/demos/pc/app/layout/base.vue   |  73 ----
 ...pi.vue => basic-usage-composition-api.vue} |  33 +-
 .../layout/{col/base.vue => basic-usage.vue}  |  33 +-
 .../layout/col/col-move-composition-api.vue   |  34 --
 .../demos/pc/app/layout/col/col-move.vue      |  42 ---
 .../app/layout/col/order-composition-api.vue  |  49 ---
 .../sites/demos/pc/app/layout/col/order.vue   |  61 ----
 .../pc/app/layout/col/tag-composition-api.vue |  33 --
 .../sites/demos/pc/app/layout/col/tag.vue     |  41 ---
 .../demos/pc/app/layout/col/webdoc/col.js     | 125 -------
 .../pc/app/layout/gutter-composition-api.vue  |   9 +-
 examples/sites/demos/pc/app/layout/gutter.vue |   9 +-
 .../pc/app/layout/order-composition-api.vue   |   8 +-
 examples/sites/demos/pc/app/layout/order.vue  |  10 +-
 .../app/layout/row/align-composition-api.vue  |  67 ----
 .../sites/demos/pc/app/layout/row/align.vue   |  75 ----
 .../app/layout/row/gutter-composition-api.vue |  55 ---
 .../row/gutter-nospace-composition-api.vue    |  54 ---
 .../pc/app/layout/row/gutter-nospace.vue      |  62 ----
 .../sites/demos/pc/app/layout/row/gutter.vue  |  63 ----
 .../layout/row/justify-composition-api.vue    |  77 -----
 .../sites/demos/pc/app/layout/row/justify.vue |  85 -----
 .../app/layout/row/order-composition-api.vue  |  50 ---
 .../sites/demos/pc/app/layout/row/order.vue   |  58 ----
 .../demos/pc/app/layout/row/webdoc/row.js     |  82 -----
 ...sition-api.vue => tag-composition-api.vue} |   0
 .../pc/app/layout/{row/tag1.vue => tag.vue}   |   0
 .../demos/pc/app/layout/webdoc/layout.cn.md   |   2 +-
 .../demos/pc/app/layout/webdoc/layout.en.md   |   2 +-
 .../demos/pc/app/layout/webdoc/layout.js      | 327 +++++++++---------
 package.json                                  |   2 +-
 packages/renderless/src/col/index.ts          |  13 +-
 packages/renderless/src/col/vue.ts            |   7 +-
 packages/vue/src/layout/src/index.ts          |   8 +-
 packages/vue/src/row/src/index.ts             |   6 +-
 packages/vue/src/row/src/pc.vue               |   2 +-
 37 files changed, 250 insertions(+), 1472 deletions(-)
 delete mode 100644 examples/sites/demos/pc/app/layout/base-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/base.vue
 rename examples/sites/demos/pc/app/layout/{col/base-composition-api.vue => basic-usage-composition-api.vue} (69%)
 rename examples/sites/demos/pc/app/layout/{col/base.vue => basic-usage.vue} (70%)
 delete mode 100644 examples/sites/demos/pc/app/layout/col/col-move-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/col/col-move.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/col/order-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/col/order.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/col/tag-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/col/tag.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/col/webdoc/col.js
 delete mode 100644 examples/sites/demos/pc/app/layout/row/align-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/row/align.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/row/gutter-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/row/gutter-nospace-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/row/gutter-nospace.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/row/gutter.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/row/justify-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/row/justify.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/row/order-composition-api.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/row/order.vue
 delete mode 100644 examples/sites/demos/pc/app/layout/row/webdoc/row.js
 rename examples/sites/demos/pc/app/layout/{row/tag1-composition-api.vue => tag-composition-api.vue} (100%)
 rename examples/sites/demos/pc/app/layout/{row/tag1.vue => tag.vue} (100%)

diff --git a/examples/sites/demos/pc/app/layout/base-composition-api.vue b/examples/sites/demos/pc/app/layout/base-composition-api.vue
deleted file mode 100644
index 2fc94141b..000000000
--- a/examples/sites/demos/pc/app/layout/base-composition-api.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-layout>
-      <tiny-row>
-        <tiny-col :span="12">
-          <div class="col">span 12</div>
-        </tiny-col>
-      </tiny-row>
-      <tiny-row>
-        <tiny-col :span="3">
-          <div class="col">span 3</div>
-        </tiny-col>
-        <tiny-col :span="6">
-          <div class="col">span 6</div>
-        </tiny-col>
-        <tiny-col :span="3">
-          <div class="col">span 3</div>
-        </tiny-col>
-      </tiny-row>
-      <tiny-row>
-        <tiny-col :span="2">
-          <div class="col">span 2</div>
-        </tiny-col>
-        <tiny-col :span="3">
-          <div class="col">span 3</div>
-        </tiny-col>
-        <tiny-col :span="2">
-          <div class="col">span 2</div>
-        </tiny-col>
-        <tiny-col :span="3">
-          <div class="col">span 3</div>
-        </tiny-col>
-        <tiny-col :span="2">
-          <div class="col">span 2</div>
-        </tiny-col>
-      </tiny-row>
-    </tiny-layout>
-  </div>
-</template>
-
-<script setup>
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.content .tiny-row {
-  margin-bottom: 20px;
-}
-
-.content .tiny-row .last-child {
-  margin-bottom: 0;
-}
-
-.content .tiny-col .col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  border-radius: 15px;
-}
-
-.content .tiny-col:nth-child(even) .col {
-  background: #73d0fc;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/base.vue b/examples/sites/demos/pc/app/layout/base.vue
deleted file mode 100644
index ad3960bb5..000000000
--- a/examples/sites/demos/pc/app/layout/base.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-layout>
-      <tiny-row>
-        <tiny-col :span="12">
-          <div class="col">span 12</div>
-        </tiny-col>
-      </tiny-row>
-      <tiny-row>
-        <tiny-col :span="3">
-          <div class="col">span 3</div>
-        </tiny-col>
-        <tiny-col :span="6">
-          <div class="col">span 6</div>
-        </tiny-col>
-        <tiny-col :span="3">
-          <div class="col">span 3</div>
-        </tiny-col>
-      </tiny-row>
-      <tiny-row>
-        <tiny-col :span="2">
-          <div class="col">span 2</div>
-        </tiny-col>
-        <tiny-col :span="3">
-          <div class="col">span 3</div>
-        </tiny-col>
-        <tiny-col :span="2">
-          <div class="col">span 2</div>
-        </tiny-col>
-        <tiny-col :span="3">
-          <div class="col">span 3</div>
-        </tiny-col>
-        <tiny-col :span="2">
-          <div class="col">span 2</div>
-        </tiny-col>
-      </tiny-row>
-    </tiny-layout>
-  </div>
-</template>
-
-<script>
-import { Layout, Row, Col } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
-  }
-}
-</script>
-
-<style scoped>
-.content .tiny-row {
-  margin-bottom: 20px;
-}
-
-.content .tiny-row .last-child {
-  margin-bottom: 0;
-}
-
-.content .tiny-col .col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  border-radius: 15px;
-}
-
-.content .tiny-col:nth-child(even) .col {
-  background: #73d0fc;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/col/base-composition-api.vue b/examples/sites/demos/pc/app/layout/basic-usage-composition-api.vue
similarity index 69%
rename from examples/sites/demos/pc/app/layout/col/base-composition-api.vue
rename to examples/sites/demos/pc/app/layout/basic-usage-composition-api.vue
index 2e8227604..ccf242540 100644
--- a/examples/sites/demos/pc/app/layout/col/base-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/basic-usage-composition-api.vue
@@ -1,13 +1,13 @@
 <template>
-  <div>
-    <div class="content">
-      <tiny-layout>
+  <div class="content">
+    <div v-for="cols in [12, 24]" :key="cols">
+      <div>每行 {{ cols }} 栅格布局示例：</div>
+      <tiny-layout :cols="cols">
         <tiny-row>
           <tiny-col :span="12">
             <div class="col">span 12</div>
           </tiny-col>
         </tiny-row>
-        <br />
         <tiny-row>
           <tiny-col :span="3">
             <div class="col">span 3</div>
@@ -19,7 +19,6 @@
             <div class="col">span 3</div>
           </tiny-col>
         </tiny-row>
-        <br />
         <tiny-row>
           <tiny-col :span="2">
             <div class="col">span 2</div>
@@ -42,6 +41,28 @@
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 </script>
+
+<style scoped>
+.content .tiny-row {
+  margin: 20px 0;
+}
+
+.content .tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.content .tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.content .tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/layout/col/base.vue b/examples/sites/demos/pc/app/layout/basic-usage.vue
similarity index 70%
rename from examples/sites/demos/pc/app/layout/col/base.vue
rename to examples/sites/demos/pc/app/layout/basic-usage.vue
index 394ee0a44..815ce3a11 100644
--- a/examples/sites/demos/pc/app/layout/col/base.vue
+++ b/examples/sites/demos/pc/app/layout/basic-usage.vue
@@ -1,13 +1,13 @@
 <template>
-  <div>
-    <div class="content">
-      <tiny-layout>
+  <div class="content">
+    <div v-for="cols in [12, 24]" :key="cols">
+      <div>每行 {{ cols }} 栅格布局示例：</div>
+      <tiny-layout :cols="cols">
         <tiny-row>
           <tiny-col :span="12">
             <div class="col">span 12</div>
           </tiny-col>
         </tiny-row>
-        <br />
         <tiny-row>
           <tiny-col :span="3">
             <div class="col">span 3</div>
@@ -19,7 +19,6 @@
             <div class="col">span 3</div>
           </tiny-col>
         </tiny-row>
-        <br />
         <tiny-row>
           <tiny-col :span="2">
             <div class="col">span 2</div>
@@ -42,7 +41,7 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Layout, Row, Col } from '@opentiny/vue'
 
 export default {
@@ -53,3 +52,25 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.content .tiny-row {
+  margin: 20px 0;
+}
+
+.content .tiny-row .last-child {
+  margin-bottom: 0;
+}
+
+.content .tiny-col .col {
+  line-height: 30px;
+  text-align: center;
+  color: #fff;
+  background: #1f9ed8;
+  border-radius: 15px;
+}
+
+.content .tiny-col:nth-child(even) .col {
+  background: #73d0fc;
+}
+</style>
diff --git a/examples/sites/demos/pc/app/layout/col/col-move-composition-api.vue b/examples/sites/demos/pc/app/layout/col/col-move-composition-api.vue
deleted file mode 100644
index 79a10a6d1..000000000
--- a/examples/sites/demos/pc/app/layout/col/col-move-composition-api.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-layout class="tiny-layout-col-move">
-      <tiny-row>
-        <tiny-col :span="2">
-          <div class="col">move 0</div>
-        </tiny-col>
-        <tiny-col :span="2" :move="1">
-          <div class="col">move 1</div>
-        </tiny-col>
-        <tiny-col :span="2" :move="4">
-          <div class="col">向右移动4格</div>
-        </tiny-col>
-        <tiny-col :span="2" :move="-6">
-          <div class="col">向左移动6格</div>
-        </tiny-col>
-      </tiny-row>
-    </tiny-layout>
-  </div>
-</template>
-
-<script setup lang="jsx">
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  border-radius: 15px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/col/col-move.vue b/examples/sites/demos/pc/app/layout/col/col-move.vue
deleted file mode 100644
index ed0f8b382..000000000
--- a/examples/sites/demos/pc/app/layout/col/col-move.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-layout class="tiny-layout-col-move">
-      <tiny-row>
-        <tiny-col :span="2">
-          <div class="col">move 0</div>
-        </tiny-col>
-        <tiny-col :span="2" :move="1">
-          <div class="col">move 1</div>
-        </tiny-col>
-        <tiny-col :span="2" :move="4">
-          <div class="col">向右移动4格</div>
-        </tiny-col>
-        <tiny-col :span="2" :move="-6">
-          <div class="col">向左移动6格</div>
-        </tiny-col>
-      </tiny-row>
-    </tiny-layout>
-  </div>
-</template>
-
-<script>
-import { Layout, Row, Col } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
-  }
-}
-</script>
-
-<style scoped>
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  border-radius: 15px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/col/order-composition-api.vue b/examples/sites/demos/pc/app/layout/col/order-composition-api.vue
deleted file mode 100644
index dab321c32..000000000
--- a/examples/sites/demos/pc/app/layout/col/order-composition-api.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-layout>
-      <tiny-row :flex="true" :gutter="20" :order="state.order">
-        <tiny-col :span="3" :no="3">
-          <div class="col">3</div>
-        </tiny-col>
-        <tiny-col :span="3" :no="1">
-          <div class="col">1</div>
-        </tiny-col>
-        <tiny-col :span="3" :no="2">
-          <div class="col">2</div>
-        </tiny-col>
-        <tiny-col :span="3" :no="4">
-          <div class="col">4</div>
-        </tiny-col>
-      </tiny-row>
-      <tiny-row :flex="true" :gutter="20" justify="center">
-        <tiny-button class="button" @click="toggleOrder">{{ state.buttonLabel }}</tiny-button>
-      </tiny-row>
-    </tiny-layout>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol, Button as TinyButton } from '@opentiny/vue'
-
-const state = ref({
-  buttonLabel: '升序',
-  order: 'asc'
-})
-
-function toggleOrder() {
-  if (state.value.buttonLabel === '升序') {
-    state.value.buttonLabel = '降序'
-    state.value.order = 'des'
-  } else {
-    state.value.buttonLabel = '升序'
-    state.value.order = 'asc'
-  }
-}
-</script>
-
-<style scoped>
-.button {
-  margin: 10px 0px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/col/order.vue b/examples/sites/demos/pc/app/layout/col/order.vue
deleted file mode 100644
index af42e0dce..000000000
--- a/examples/sites/demos/pc/app/layout/col/order.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-  <div class="content">
-    <tiny-layout>
-      <tiny-row :flex="true" :gutter="20" :order="state.order">
-        <tiny-col :span="3" :no="3">
-          <div class="col">3</div>
-        </tiny-col>
-        <tiny-col :span="3" :no="1">
-          <div class="col">1</div>
-        </tiny-col>
-        <tiny-col :span="3" :no="2">
-          <div class="col">2</div>
-        </tiny-col>
-        <tiny-col :span="3" :no="4">
-          <div class="col">4</div>
-        </tiny-col>
-      </tiny-row>
-      <tiny-row :flex="true" :gutter="20" justify="center">
-        <tiny-button class="button" @click="toggleOrder">{{ state.buttonLabel }}</tiny-button>
-      </tiny-row>
-    </tiny-layout>
-  </div>
-</template>
-
-<script>
-import { Layout, Row, Col, Button } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      state: {
-        buttonLabel: '升序',
-        order: 'asc'
-      }
-    }
-  },
-  methods: {
-    toggleOrder() {
-      if (this.state.buttonLabel === '升序') {
-        this.state.buttonLabel = '降序'
-        this.state.order = 'des'
-      } else {
-        this.state.buttonLabel = '升序'
-        this.state.order = 'asc'
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.button {
-  margin: 10px 0px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/col/tag-composition-api.vue b/examples/sites/demos/pc/app/layout/col/tag-composition-api.vue
deleted file mode 100644
index ceabaacda..000000000
--- a/examples/sites/demos/pc/app/layout/col/tag-composition-api.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<template>
-  <div>
-    <div class="content">
-      <tiny-layout class="tiny-layout-tag">
-        <tiny-row>
-          <tiny-col :span="3">
-            <div class="col">div element</div>
-          </tiny-col>
-          <tiny-col :span="6" tag="span">
-            <div class="col">span element of tag</div>
-          </tiny-col>
-          <tiny-col :span="3">
-            <div class="col">div element</div>
-          </tiny-col>
-        </tiny-row>
-      </tiny-layout>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  border-radius: 15px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/col/tag.vue b/examples/sites/demos/pc/app/layout/col/tag.vue
deleted file mode 100644
index 303771fb1..000000000
--- a/examples/sites/demos/pc/app/layout/col/tag.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <div>
-    <div class="content">
-      <tiny-layout class="tiny-layout-tag">
-        <tiny-row>
-          <tiny-col :span="3">
-            <div class="col">div element</div>
-          </tiny-col>
-          <tiny-col :span="6" tag="span">
-            <div class="col">span element of tag</div>
-          </tiny-col>
-          <tiny-col :span="3">
-            <div class="col">div element</div>
-          </tiny-col>
-        </tiny-row>
-      </tiny-layout>
-    </div>
-  </div>
-</template>
-
-<script lang="jsx">
-import { Layout, Row, Col } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
-  }
-}
-</script>
-
-<style scoped>
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  border-radius: 15px;
-}
-</style>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/app/layout/col/webdoc/col.js b/examples/sites/demos/pc/app/layout/col/webdoc/col.js
deleted file mode 100644
index a009720ef..000000000
--- a/examples/sites/demos/pc/app/layout/col/webdoc/col.js
+++ /dev/null
@@ -1,125 +0,0 @@
-export default {
-  column: '2',
-  owner: '',
-  demos: [],
-  apis: [
-    {
-      'name': 'col',
-      'type': 'component',
-      'properties': [
-        {
-          'name': 'lg',
-          'type': 'Number , Object',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '≥1200px 响应式栅格数或者栅格属性对象，例如： {span: 4, offset: 4} 。',
-            'en-US':
-              'Number of responsive grids or grid attribute objects greater than or equal to 1200px, for example, {span: 4, offset: 4}.'
-          },
-          'demoId': 'base'
-        },
-        {
-          'name': 'md',
-          'type': 'Number , Object',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '≥992px 响应式栅格数或者栅格属性对象，例如： {span: 4, offset: 4} 。',
-            'en-US':
-              'Number of responsive grids or grid attribute objects greater than or equal to 992px, for example, {span: 4, offset: 4}.'
-          },
-          'demoId': 'base'
-        },
-        {
-          'name': 'no',
-          'type': 'Number',
-          'defaultValue': '该属性的默认值为 0',
-          'desc': {
-            'zh-CN': '排序编号（row中启用order生效），默认值为 0 。',
-            'en-US': 'Sort ID (valid when order is enabled in a row). The default value is 0.'
-          },
-          'demoId': 'base'
-        },
-        {
-          'name': 'offset',
-          'type': 'Number',
-          'defaultValue': '该属性的默认值为 0',
-          'desc': {
-            'zh-CN': '栅格左侧的间隔格数，默认为 0 。',
-            'en-US': 'Number of grids on the left of the grid. The default value is 0.'
-          },
-          'demoId': 'base'
-        },
-        {
-          'name': 'sm',
-          'type': 'Number , Object',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '≥768px 响应式栅格数或者栅格属性对象，例如： {span: 4, offset: 4} 。',
-            'en-US':
-              'Number of responsive grids or grid attribute objects greater than or equal to 768 pixels, for example, {span: 4, offset: 4}.'
-          },
-          'demoId': 'base'
-        },
-        {
-          'name': 'span',
-          'type': 'Number',
-          'defaultValue': '该属性的默认值为 12',
-          'desc': { 'zh-CN': '栅格占据的列数', 'en-US': 'Number of columns occupied by a grid' },
-          'demoId': 'base'
-        },
-        {
-          'name': 'tag',
-          'type': 'String',
-          'defaultValue': '该属性的默认值为 div',
-          'desc': {
-            'zh-CN': '自定义元素标签，可选任意标签;该属性的可选值为 *',
-            'en-US': 'User-defined element label. Any label can be selected. The optional value of this attribute is *'
-          },
-          'demoId': 'base'
-        },
-        {
-          'name': 'xl',
-          'type': 'Number , Object',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '≥1920px 响应式栅格数或者栅格属性对象，例如： {span: 4, offset: 4} 。',
-            'en-US':
-              'Number of responsive grids or grid attribute objects greater than or equal to 1920px, for example, {span: 4, offset: 4}.'
-          },
-          'demoId': 'base'
-        },
-        {
-          'name': 'xs',
-          'type': 'Number , Object',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '<768px 响应式栅格数或者栅格属性对象，例如： {span: 4, offset: 4} 。',
-            'en-US': '<768px responsive grids or grid attribute objects, for example, {span: 4, offset: 4}.'
-          },
-          'demoId': 'base'
-        },
-        {
-          'name': 'move',
-          'type': 'Number',
-          'defaultValue': '该属性的默认值为 0',
-          'desc': {
-            'zh-CN': '栅格左右移动格数（正数向右，负数向左）',
-            'en-US':
-              'Number of grids that move left and right (positive numbers to the right, negative numbers to the left)'
-          },
-          'demoId': 'base'
-        }
-      ],
-      'events': [],
-      'slots': [
-        {
-          'name': 'default',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
-          'demoId': 'base'
-        }
-      ]
-    }
-  ]
-}
diff --git a/examples/sites/demos/pc/app/layout/gutter-composition-api.vue b/examples/sites/demos/pc/app/layout/gutter-composition-api.vue
index bbb16f273..e811129c6 100644
--- a/examples/sites/demos/pc/app/layout/gutter-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/gutter-composition-api.vue
@@ -1,16 +1,15 @@
 <template>
   <div class="content">
     <tiny-layout>
-      <div class="title"></div>
-      <tiny-row :gutter="20">
+      <tiny-row v-for="gutter in [0, 10, 20]" :gutter="gutter">
         <tiny-col :span="4">
-          <div class="col">gutter 20px</div>
+          <div class="col">gutter {{ gutter }}px</div>
         </tiny-col>
         <tiny-col :span="4">
-          <div class="col">gutter 20px</div>
+          <div class="col">gutter {{ gutter }}px</div>
         </tiny-col>
         <tiny-col :span="4">
-          <div class="col">gutter 20px</div>
+          <div class="col">gutter {{ gutter }}px</div>
         </tiny-col>
       </tiny-row>
     </tiny-layout>
diff --git a/examples/sites/demos/pc/app/layout/gutter.vue b/examples/sites/demos/pc/app/layout/gutter.vue
index 17e0f0d34..539950325 100644
--- a/examples/sites/demos/pc/app/layout/gutter.vue
+++ b/examples/sites/demos/pc/app/layout/gutter.vue
@@ -1,16 +1,15 @@
 <template>
   <div class="content">
     <tiny-layout>
-      <div class="title"></div>
-      <tiny-row :gutter="20">
+      <tiny-row v-for="gutter in [0, 10, 20]" :gutter="gutter">
         <tiny-col :span="4">
-          <div class="col">gutter 20px</div>
+          <div class="col">gutter {{ gutter }}px</div>
         </tiny-col>
         <tiny-col :span="4">
-          <div class="col">gutter 20px</div>
+          <div class="col">gutter {{ gutter }}px</div>
         </tiny-col>
         <tiny-col :span="4">
-          <div class="col">gutter 20px</div>
+          <div class="col">gutter {{ gutter }}px</div>
         </tiny-col>
       </tiny-row>
     </tiny-layout>
diff --git a/examples/sites/demos/pc/app/layout/order-composition-api.vue b/examples/sites/demos/pc/app/layout/order-composition-api.vue
index 44fa87b4e..3e75f3f91 100644
--- a/examples/sites/demos/pc/app/layout/order-composition-api.vue
+++ b/examples/sites/demos/pc/app/layout/order-composition-api.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="content">
     <tiny-layout>
+      <tiny-row>
+        <tiny-button @click="toggleOrder">
+          {{ state.buttonLabel }}
+        </tiny-button>
+      </tiny-row>
       <tiny-row :flex="true" :gutter="20" :order="state.order">
         <tiny-col :span="3" :no="3">
           <div class="col">3</div>
@@ -15,9 +20,6 @@
           <div class="col">4</div>
         </tiny-col>
       </tiny-row>
-      <tiny-row :flex="true" :gutter="20" justify="center">
-        <tiny-button @click="toggleOrder">{{ state.buttonLabel }}</tiny-button>
-      </tiny-row>
     </tiny-layout>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/layout/order.vue b/examples/sites/demos/pc/app/layout/order.vue
index 256a8a793..231b64658 100644
--- a/examples/sites/demos/pc/app/layout/order.vue
+++ b/examples/sites/demos/pc/app/layout/order.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="content">
     <tiny-layout>
+      <tiny-row>
+        <tiny-button @click="toggleOrder">
+          {{ state.buttonLabel }}
+        </tiny-button>
+      </tiny-row>
       <tiny-row :flex="true" :gutter="20" :order="state.order">
         <tiny-col :span="3" :no="3">
           <div class="col">3</div>
@@ -15,11 +20,6 @@
           <div class="col">4</div>
         </tiny-col>
       </tiny-row>
-      <tiny-row :flex="true" :gutter="20" justify="center">
-        <tiny-button @click="toggleOrder">
-          {{ state.buttonLabel }}
-        </tiny-button>
-      </tiny-row>
     </tiny-layout>
   </div>
 </template>
diff --git a/examples/sites/demos/pc/app/layout/row/align-composition-api.vue b/examples/sites/demos/pc/app/layout/row/align-composition-api.vue
deleted file mode 100644
index d9d831b70..000000000
--- a/examples/sites/demos/pc/app/layout/row/align-composition-api.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <tiny-layout class="tiny-layout-align">
-    <tiny-row :flex="true" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col lg">默认</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col md">默认</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col sm">默认</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" align="middle" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col lg">middle</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col md">middle</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col sm">middle</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" align="bottom" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col lg">bottom</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col md">bottom</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col sm">bottom</div>
-      </tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script setup>
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.lg {
-  height: 120px;
-}
-
-.md {
-  height: 80px;
-}
-
-.sm {
-  height: 40px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/row/align.vue b/examples/sites/demos/pc/app/layout/row/align.vue
deleted file mode 100644
index 00a256b99..000000000
--- a/examples/sites/demos/pc/app/layout/row/align.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <tiny-layout class="tiny-layout-align">
-    <tiny-row :flex="true" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col lg">默认</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col md">默认</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col sm">默认</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" align="middle" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col lg">middle</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col md">middle</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col sm">middle</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" align="bottom" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col lg">bottom</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col md">bottom</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col sm">bottom</div>
-      </tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script lang="jsx">
-import { Layout, Row, Col } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
-  }
-}
-</script>
-
-<style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-
-.lg {
-  height: 120px;
-}
-
-.md {
-  height: 80px;
-}
-
-.sm {
-  height: 40px;
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/row/gutter-composition-api.vue b/examples/sites/demos/pc/app/layout/row/gutter-composition-api.vue
deleted file mode 100644
index 2ae59f4c7..000000000
--- a/examples/sites/demos/pc/app/layout/row/gutter-composition-api.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <tiny-layout class="tiny-layout-gutter">
-    <tiny-row class="margin-bottom10">
-      <tiny-col :span="3" id="test">
-        <div class="col">默认</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">默认</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">默认</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :gutter="20" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">20</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">20</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">20</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :gutter="50" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">50</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">50</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">50</div>
-      </tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script setup>
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/row/gutter-nospace-composition-api.vue b/examples/sites/demos/pc/app/layout/row/gutter-nospace-composition-api.vue
deleted file mode 100644
index fa04f4f2a..000000000
--- a/examples/sites/demos/pc/app/layout/row/gutter-nospace-composition-api.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <tiny-layout>
-    <!-- 如果 row 未设置 gutter，或者 row 设置 gutter 为 0，那么 col 左右内边距为 10px -->
-    <tiny-row class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">no gutter</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">no gutter</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">no gutter</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row class="margin-bottom10" :gutter="0">
-      <tiny-col :span="3">
-        <div class="col">0 gutter</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">0 gutter</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">0 gutter</div>
-      </tiny-col>
-    </tiny-row>
-    <!-- 如果 row 未设置 gutter，或者 row 设置 gutter 为 0，并且设置 row 属性 no-space，那么 col 左右内边距为 0 -->
-    <tiny-row class="margin-bottom10" no-space>
-      <tiny-col :span="3">
-        <div class="col">no gutter no space</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">no gutter no space</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">no gutter no space</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row class="margin-bottom10" :gutter="0" no-space>
-      <tiny-col :span="3">
-        <div class="col">0 gutter no space</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">0 gutter no space</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">0 gutter no space</div>
-      </tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script setup lang="jsx">
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
-</script>
diff --git a/examples/sites/demos/pc/app/layout/row/gutter-nospace.vue b/examples/sites/demos/pc/app/layout/row/gutter-nospace.vue
deleted file mode 100644
index fd38e925d..000000000
--- a/examples/sites/demos/pc/app/layout/row/gutter-nospace.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <tiny-layout>
-    <!-- 如果 row 未设置 gutter，或者 row 设置 gutter 为 0，那么 col 左右内边距为 10px -->
-    <tiny-row class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">no gutter</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">no gutter</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">no gutter</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row class="margin-bottom10" :gutter="0">
-      <tiny-col :span="3">
-        <div class="col">0 gutter</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">0 gutter</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">0 gutter</div>
-      </tiny-col>
-    </tiny-row>
-    <!-- 如果 row 未设置 gutter，或者 row 设置 gutter 为 0，并且设置 row 属性 no-space，那么 col 左右内边距为 0 -->
-    <tiny-row class="margin-bottom10" no-space>
-      <tiny-col :span="3">
-        <div class="col">no gutter no space</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">no gutter no space</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">no gutter no space</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row class="margin-bottom10" :gutter="0" no-space>
-      <tiny-col :span="3">
-        <div class="col">0 gutter no space</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">0 gutter no space</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">0 gutter no space</div>
-      </tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script lang="jsx">
-import { Layout, Row, Col } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
-  }
-}
-</script>
diff --git a/examples/sites/demos/pc/app/layout/row/gutter.vue b/examples/sites/demos/pc/app/layout/row/gutter.vue
deleted file mode 100644
index 6b411a6a7..000000000
--- a/examples/sites/demos/pc/app/layout/row/gutter.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <tiny-layout class="tiny-layout-gutter">
-    <tiny-row class="margin-bottom10">
-      <tiny-col :span="3" id="test">
-        <div class="col">默认</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">默认</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">默认</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :gutter="20" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">20</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">20</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">20</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :gutter="50" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">50</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">50</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">50</div>
-      </tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script>
-import { Layout, Row, Col } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
-  }
-}
-</script>
-
-<style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/row/justify-composition-api.vue b/examples/sites/demos/pc/app/layout/row/justify-composition-api.vue
deleted file mode 100644
index e6c7fb98c..000000000
--- a/examples/sites/demos/pc/app/layout/row/justify-composition-api.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <tiny-layout class="tiny-layout-justify">
-    <tiny-row :flex="true" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">默认</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">默认</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">默认</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" justify="end" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">end</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">end</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">end</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" justify="center" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">center</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">center</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">center</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" justify="space-around" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">space-around</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">space-around</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">space-around</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" justify="space-between" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">space-between</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">space-between</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">space-between</div>
-      </tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script setup>
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/row/justify.vue b/examples/sites/demos/pc/app/layout/row/justify.vue
deleted file mode 100644
index af300c9c4..000000000
--- a/examples/sites/demos/pc/app/layout/row/justify.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <tiny-layout class="tiny-layout-justify">
-    <tiny-row :flex="true" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">默认</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">默认</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">默认</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" justify="end" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">end</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">end</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">end</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" justify="center" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">center</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">center</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">center</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" justify="space-around" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">space-around</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">space-around</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">space-around</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" justify="space-between" class="margin-bottom10">
-      <tiny-col :span="3">
-        <div class="col">space-between</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">space-between</div>
-      </tiny-col>
-      <tiny-col :span="3">
-        <div class="col">space-between</div>
-      </tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script lang="jsx">
-import { Layout, Row, Col } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
-  }
-}
-</script>
-
-<style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-</style>
\ No newline at end of file
diff --git a/examples/sites/demos/pc/app/layout/row/order-composition-api.vue b/examples/sites/demos/pc/app/layout/row/order-composition-api.vue
deleted file mode 100644
index d8f97bcae..000000000
--- a/examples/sites/demos/pc/app/layout/row/order-composition-api.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <tiny-layout class="tiny-layout-order">
-    <tiny-row :flex="true" order="asc" class="margin-bottom10">
-      <tiny-col :span="3" :no="3">
-        <div class="col">3 asc</div>
-      </tiny-col>
-      <tiny-col :span="3" :no="1">
-        <div class="col">1 asc</div>
-      </tiny-col>
-      <tiny-col :span="3" :no="2">
-        <div class="col">2 asc</div>
-      </tiny-col>
-      <tiny-col :span="3" :no="4">
-        <div class="col">4 asc</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" order="des" class="margin-bottom10">
-      <tiny-col :span="3" :no="1">
-        <div class="col">1 des</div>
-      </tiny-col>
-      <tiny-col :span="3" :no="2">
-        <div class="col">2 des</div>
-      </tiny-col>
-      <tiny-col :span="3" :no="4">
-        <div class="col">4 des</div>
-      </tiny-col>
-      <tiny-col :span="3" :no="3">
-        <div class="col">3 des</div>
-      </tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script setup>
-import { Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
-</script>
-
-<style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/row/order.vue b/examples/sites/demos/pc/app/layout/row/order.vue
deleted file mode 100644
index dfa9b2341..000000000
--- a/examples/sites/demos/pc/app/layout/row/order.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <tiny-layout class="tiny-layout-order">
-    <tiny-row :flex="true" order="asc" class="margin-bottom10">
-      <tiny-col :span="3" :no="3">
-        <div class="col">3 asc</div>
-      </tiny-col>
-      <tiny-col :span="3" :no="1">
-        <div class="col">1 asc</div>
-      </tiny-col>
-      <tiny-col :span="3" :no="2">
-        <div class="col">2 asc</div>
-      </tiny-col>
-      <tiny-col :span="3" :no="4">
-        <div class="col">4 asc</div>
-      </tiny-col>
-    </tiny-row>
-    <tiny-row :flex="true" order="des" class="margin-bottom10">
-      <tiny-col :span="3" :no="1">
-        <div class="col">1 des</div>
-      </tiny-col>
-      <tiny-col :span="3" :no="2">
-        <div class="col">2 des</div>
-      </tiny-col>
-      <tiny-col :span="3" :no="4">
-        <div class="col">4 des</div>
-      </tiny-col>
-      <tiny-col :span="3" :no="3">
-        <div class="col">3 des</div>
-      </tiny-col>
-    </tiny-row>
-  </tiny-layout>
-</template>
-
-<script>
-import { Layout, Row, Col } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyLayout: Layout,
-    TinyRow: Row,
-    TinyCol: Col
-  }
-}
-</script>
-
-<style scoped>
-.margin-bottom10 {
-  margin-bottom: 10px;
-}
-
-.col {
-  line-height: 30px;
-  text-align: center;
-  color: #fff;
-  background: #1f9ed8;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-}
-</style>
diff --git a/examples/sites/demos/pc/app/layout/row/webdoc/row.js b/examples/sites/demos/pc/app/layout/row/webdoc/row.js
deleted file mode 100644
index f5d475f6e..000000000
--- a/examples/sites/demos/pc/app/layout/row/webdoc/row.js
+++ /dev/null
@@ -1,82 +0,0 @@
-export default {
-  column: '2',
-  owner: '',
-  demos: [],
-  apis: [
-    {
-      'name': 'row',
-      'type': 'component',
-      'properties': [
-        {
-          'name': 'align',
-          'type': 'String',
-          'defaultValue': '该属性的默认值为 top',
-          'desc': {
-            'zh-CN': 'flex 布局下的垂直排列方式;该属性的可选值为 top / middle / bottom',
-            'en-US':
-              'vertical arrangement mode in the flex layout; The value of this attribute can be top / middle / bottom'
-          },
-          'demoId': 'align'
-        },
-        {
-          'name': 'flex',
-          'type': 'Boolean',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': '启用 flex 布局模式，现代浏览器下有效',
-            'en-US': 'Enable the flex layout mode. This parameter is valid in modern browsers.'
-          },
-          'demoId': ''
-        },
-        {
-          'name': 'gutter',
-          'type': 'Number',
-          'defaultValue': '该属性的默认值为 0',
-          'desc': { 'zh-CN': '栅格间隔', 'en-US': 'Grid Interval' },
-          'demoId': 'align'
-        },
-        {
-          'name': 'justify',
-          'type': 'String',
-          'defaultValue': '该属性的默认值为 start',
-          'desc': {
-            'zh-CN': 'flex 布局下的水平排列方式;该属性的可选值为 start / end / center / space-around / space-between',
-            'en-US':
-              'horizontal arrangement mode in flex layout; The optional value of this attribute is start / end / center / space-around / space-between'
-          },
-          'demoId': 'align'
-        },
-        {
-          'name': 'order',
-          'type': 'String',
-          'defaultValue': '',
-          'desc': {
-            'zh-CN': 'flex 布局下排序方式;该属性的可选值为 asc / des',
-            'en-US': 'Flex layout sorting mode; The optional value of this attribute is asc / des'
-          },
-          'demoId': 'align'
-        },
-        {
-          'name': 'tag',
-          'type': 'String',
-          'defaultValue': '该属性的默认值为 div',
-          'desc': {
-            'zh-CN': '自定义元素标签，可选任意标签;该属性的可选值为 *',
-            'en-US': 'User-defined element label. Any label can be selected. The optional value of this attribute is *'
-          },
-          'demoId': 'align'
-        }
-      ],
-      'events': [],
-      'slots': [
-        {
-          'name': 'default',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
-          'demoId': 'base'
-        }
-      ]
-    }
-  ]
-}
diff --git a/examples/sites/demos/pc/app/layout/row/tag1-composition-api.vue b/examples/sites/demos/pc/app/layout/tag-composition-api.vue
similarity index 100%
rename from examples/sites/demos/pc/app/layout/row/tag1-composition-api.vue
rename to examples/sites/demos/pc/app/layout/tag-composition-api.vue
diff --git a/examples/sites/demos/pc/app/layout/row/tag1.vue b/examples/sites/demos/pc/app/layout/tag.vue
similarity index 100%
rename from examples/sites/demos/pc/app/layout/row/tag1.vue
rename to examples/sites/demos/pc/app/layout/tag.vue
diff --git a/examples/sites/demos/pc/app/layout/webdoc/layout.cn.md b/examples/sites/demos/pc/app/layout/webdoc/layout.cn.md
index 9aa282315..c852fe1f7 100644
--- a/examples/sites/demos/pc/app/layout/webdoc/layout.cn.md
+++ b/examples/sites/demos/pc/app/layout/webdoc/layout.cn.md
@@ -4,4 +4,4 @@ title: Layout 布局
 
 # Layout 布局
 
-<div>采用12栅格布局，可使页面布局变得非常简单与清晰。</div>
+<div>支持 12/24 栅格布局，可使页面布局变得非常简单与清晰。</div>
diff --git a/examples/sites/demos/pc/app/layout/webdoc/layout.en.md b/examples/sites/demos/pc/app/layout/webdoc/layout.en.md
index 6c4dbd8f0..4e73a9713 100644
--- a/examples/sites/demos/pc/app/layout/webdoc/layout.en.md
+++ b/examples/sites/demos/pc/app/layout/webdoc/layout.en.md
@@ -4,4 +4,4 @@ title: Layout
 
 # Layout
 
-<div>The grid layout makes the layout simple and clear.</div>
+<div>The 12/24 grid layout makes the layout simple and clear.</div>
diff --git a/examples/sites/demos/pc/app/layout/webdoc/layout.js b/examples/sites/demos/pc/app/layout/webdoc/layout.js
index b428acb9d..a09b8492c 100644
--- a/examples/sites/demos/pc/app/layout/webdoc/layout.js
+++ b/examples/sites/demos/pc/app/layout/webdoc/layout.js
@@ -3,124 +3,106 @@ export default {
   owner: '',
   demos: [
     {
-      'demoId': 'base',
-      'name': { 'zh-CN': '栅格布局', 'en-US': 'Grid Layout' },
+      'demoId': 'basic-usage',
+      'name': { 'zh-CN': '基本用法', 'en-US': 'Basic usage' },
       'desc': {
-        'zh-CN':
-          '<p>通过使用 <code>Row</code> , <code>Col</code> 组件的 <code>span</code> 属性实现栅格系统布局。\n 该系统默认为12栅格，<code>Col</code> 组件的 <code>span</code>之和大于12时，布局会自动换行显示。</p>\n',
-        'en-US':
-          '<p>The grid system layout is implemented by using the <code>span</code> attribute of the <code>Row</code>, <code>Col</code> component. </p>\n'
+        'zh-CN': `<p>
+            通过在<code>Layout </code> 组件嵌套使用 <code>Row</code> , <code>Col</code> 组件, 来实现对一个区域进行 12/24 栅格布局。<br>
+            通过<code>Layout </code> 组件的<code> cols </code> 属性来指定布局的总栅格栏数，组件库默认为12栅格栏；<br>
+            通过 <code>Col</code> 组件的 <code>span</code> 属性指定每栏所占栅格数。当一行的栅格数之和大于总栅格栏数时，布局会自动换行显示。<br>
+          </p>`,
+        'en-US': `<p>
+          A 12/24 grid Layout of an area is implemented by nesting <code>Row</code>, <code>Col</code> components within <code>Layout </code> components. <br>
+          Use the <code> cols </code> property of the <code>Layout </code> component to specify the total number of grid columns for the layout. The component library defaults to 12 grid columns. <br>
+          The <code>span</code> property of the <code>Col</code> component specifies the number of grids per column. When the sum of the number of grids in a row is greater than the total number of grid columns, the layout is automatically wrapped. <br> 
+        </p>`
       },
-      'codeFiles': ['base.vue']
-    },
-    {
-      'demoId': 'alignment',
-      'name': { 'zh-CN': '对齐方式', 'en-US': 'Alignment' },
-      'desc': {
-        'zh-CN':
-          '<p>通过设置<code>Row</code> 的 <code>flex</code> 属性为 <code>true</code> 来启用 flex 布局，并通过 <code>justify</code> 与 <code>align</code> 属性调整子元素的对齐方式。</p>\n<div class="tip custom-block"><p class="custom-block-title">提示</p>\n<p>flex 布局存在 IE 兼容性问题，只能在 IE 10 以上运行。</p>\n</div>\n',
-        'en-US':
-          '<p>Enable the flex layout by setting the <code>flex</code> property to <code>true</code>. The <code>justify</code> and <code>align</code> attributes are used to adjust the alignment of the child elements. </p>\n<div class="tip custom-block"><p class="custom-block-title"> Prompt</p>\n<p>The flex layout has Internet Explorer compatibility issues and can only run on Internet Explorer 10 or later. </p>\n</div>\n'
-      },
-      'codeFiles': ['alignment.vue']
-    },
-    {
-      'demoId': 'order',
-      'name': { 'zh-CN': '排序', 'en-US': 'Sort' },
-      'desc': {
-        'zh-CN':
-          '<p>在启用 <code>flex</code> 布局时，可通过设置 <code>Row</code> 组件的 <code>order</code> 属性，给带 <code>no</code> 属性的 <code>col</code>排序。</p>\n<div class="tip custom-block"><p class="custom-block-title">提示</p>\n<p>flex 布局存在 IE 兼容性问题，只能在 IE 10 以上运行。</p>\n</div>\n',
-        'en-US':
-          '<p>When enabling the <code>flex</code> layout, you can set the <code>order</code> attribute of the <code>Row</code> component. Sorts the <code>col</code> with the <code>no</code> attribute. </p>\n<div class="tip custom-block"><p class="custom-block-title"> Prompt</p>\n<p>The flex layout has Internet Explorer compatibility issues and can only run on Internet Explorer 10 or later. </p>\n</div>\n'
-      },
-      'codeFiles': ['order.vue']
-    },
-    {
-      'demoId': 'offset',
-      'name': { 'zh-CN': '偏移', 'en-US': 'Offset' },
-      'desc': {
-        'zh-CN': '<p>通过设置 <code>Col</code> 组件的 <code>offset</code> 属性来指定分栏偏移的栏数。</p>\n',
-        'en-US':
-          '<p>Specifies the number of columns offset by setting the <code>offset</code> property of the <code>Col</code> component. </p>\n'
-      },
-      'codeFiles': ['offset.vue']
-    },
-    {
-      'demoId': 'align',
-      'name': { 'zh-CN': '垂直排列方式', 'en-US': 'vertical arrangement' },
-      'desc': {
-        'zh-CN': '<p>通过使用 <code>Row</code> 组件的 <code>align</code> 属性实现\tflex 布局下的垂直排列方式。</p>\n',
-        'en-US':
-          '<p>Use the <code>align</code> attribute of the <code>Row</code> component to implement the vertical arrangement in \tflex layout. </p>\n'
-      },
-      'codeFiles': ['row/align.vue']
-    },
-    {
-      'demoId': 'gutter',
-      'name': { 'zh-CN': '栅格间隔', 'en-US': 'Grid Interval' },
-      'desc': {
-        'zh-CN': '<p>通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。</p>\n',
-        'en-US':
-          '<p>The grid spacing is implemented by using the <code>gutter</code> attribute of the <code>Row</code> component. </p>\n'
-      },
-      'codeFiles': ['gutter.vue']
-    },
-    {
-      'demoId': 'justify',
-      'name': { 'zh-CN': '水平排列方式', 'en-US': 'horizontal arrangement' },
-      'desc': {
-        'zh-CN': '<p>通过使用 <code>Row</code> 组件的 <code>justify</code> 属性实现 flex 布局下的水平排列方式。</p>\n',
-        'en-US':
-          '<p>The <code>justify</code> attribute of the <code>Row</code> component is used to implement horizontal arrangement in the flex layout. </p>\n'
-      },
-      'codeFiles': ['row/justify.vue']
-    },
-    {
-      'demoId': 'order1',
-      'name': { 'zh-CN': '排序方式', 'en-US': 'Sort by' },
-      'desc': {
-        'zh-CN': '<p>通过使用 <code>Row</code> 组件的 <code>order</code> 属性实现 flex 布局下排序方式。</p>\n',
-        'en-US':
-          '<p>The <code>order</code> attribute of the <code>Row</code> component is used to implement the sorting mode in the flex layout. </p>\n'
-      },
-      'codeFiles': ['row/order.vue']
-    },
-    {
-      'demoId': 'tag1',
-      'name': { 'zh-CN': '自定义元素标签', 'en-US': 'Custom Element Label' },
-      'desc': {
-        'zh-CN': '<p>通过使用 <code>Row</code> 组件的 <code>tag</code> 属性实现自定义元素标签，可选任意标签。</p>\n',
-        'en-US':
-          '<p>The <code>tag</code> attribute of the <code>Row</code> component is used to customize element tags. Any tag is optional. </p>\n'
-      },
-      'codeFiles': ['row/tag1.vue']
-    },
-    {
-      'demoId': 'col-move',
-      'name': { 'zh-CN': '移动', 'en-US': 'Move' },
-      'desc': {
-        'zh-CN': '<p>通过设置 <code>Col</code> 组件的 <code>move</code> 属性来指定分栏偏移的栏数。</p>\n',
-        'en-US':
-          '<p>Specifies the number of columns offset by setting the <code>move</code> property of the <code>Col</code> component. </p>\n'
-      },
-      'codeFiles': ['col/col-move.vue']
+      'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'responsive-layout',
       'name': { 'zh-CN': '响应式布局', 'en-US': 'Responsive Layout' },
       'desc': {
-        'zh-CN':
-          '<p>参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：<code>xs</code>、<code>sm</code>、<code>md</code>、<code>lg</code> 和 <code>xl</code>。</p>\n',
-        'en-US':
-          '<p>Referring to the responsive design of Bootstrap, five response sizes are preset: <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>. </p>\n'
+        'zh-CN': `<p>
+            在<code>Col</code> 组件预设了五个响应尺寸：<code>xs</code>、<code>sm</code>、<code>md</code>、<code>lg</code> 和 <code>xl</code>，
+            来指定在每一个媒介查询尺寸时，该列应该占用的栅格数。组件库默认媒介查询的断点位置为<code>768 / 992 / 1200 / 1920</code><br>
+            请改变浏览器窗口的大小，观察下面示例中，各列所占栅格的变化。
+          </p>`,
+        'en-US': `<p>
+            The <code>Col</code> component presets five response sizes: <code>xs</code>, <code>sm</code>, <code>md</code>, <code>lg</code>, and <code>xl</code>.
+            To specify the number of rasters that the column should occupy at each medium query size. The default media query is <code> 768/992/1200/1920 </code><br>
+            In the following example, resize the browser window to see how the columns are placed on the grid.
+           </p>`
       },
       'codeFiles': ['responsive-layout.vue']
     },
+    {
+      'demoId': 'order',
+      'name': { 'zh-CN': 'Col 排序', 'en-US': 'Sort' },
+      'desc': {
+        'zh-CN': `<p>
+            在启用<code>Row</code> 组件的 <code>flex</code> 布局时，可通过设置它的 <code>order</code> 属性值为: <code>asc 或 desc</code>，给<code>Col</code> 组件排序。<br>
+            待排序的列需指定 <code>no</code> 属性为数字值，属性的默认值为0。
+          </p>`,
+        'en-US': `<p>
+            When you enable the <code>flex</code> layout of the <code>Row</code> component, you can do this by setting its <code>order</code> property to: <code>asc or desc</code>, which sorts <code>Col</code> components. <br>
+            The column to be sorted requires the <code>no</code> attribute to be numeric, which defaults to 0.
+          </p>`
+      },
+      'codeFiles': ['order.vue']
+    },
+    {
+      'demoId': 'alignment',
+      'name': { 'zh-CN': '对齐方式', 'en-US': 'Alignment' },
+      'desc': {
+        'zh-CN': `<p>
+            通过<code>Row</code> 组件的 <code>flex</code> 属性设置为 <code>true</code> 来启用 flex 布局，
+            并通过 <code>justify</code> 来指定主轴方向的对齐方式，通过 <code>align</code> 属性指定副轴的对齐方式。<br>
+          </p>`,
+        'en-US': `<p>
+            Enable the flex layout by setting the <code>Row</code> component's <code>flex</code> property to <code>true</code>.
+            Use <code>justify</code> to specify the main axis alignment and the <code>align</code> attribute to specify the secondary axis alignment. <br>
+          </p>`
+      },
+      'codeFiles': ['alignment.vue']
+    },
+    {
+      'demoId': 'offset',
+      'name': { 'zh-CN': '偏移', 'en-US': 'Offset' },
+      'desc': {
+        'zh-CN': '<p>通过设置 <code>Col</code> 组件的 <code>offset</code> 属性来指定当前列偏移的栏数。</p>',
+        'en-US':
+          '<p>You specify the number of columns to offset by by setting the <code>offset</code> property of the <code>Col</code> component.Specifies the number of columns offset by setting the <code>offset</code> property of the <code>Col</code> component. </p>'
+      },
+      'codeFiles': ['offset.vue']
+    },
+    {
+      'demoId': 'gutter',
+      'name': { 'zh-CN': '栅格间隔', 'en-US': 'Gutter' },
+      'desc': {
+        'zh-CN': `<p>
+            通过使用 <code>Row</code> 组件的 <code>gutter</code> 属性实现栅格间隔。
+            不设置 <code>gutter</code> 时，组件会默认为 <code>Col</code> 设置<code> 左右10px </code>的padding值。
+          </p>`,
+        'en-US': `<p>
+            This is done by using the <code>gutter</code> property of the <code>Row</code> component.
+            Without setting the <code>gutter</code>, the component will default to <code>Col</code> and set the padding value to 10px </code> around the <code>. 
+          </p>`
+      },
+      'codeFiles': ['gutter.vue']
+    },
     {
       'demoId': 'tag',
       'name': { 'zh-CN': '自定义元素标签', 'en-US': 'Custom Element Label' },
-      'desc': { 'zh-CN': '<p>可选任意标签。</p>\n', 'en-US': '<p>The value can be any tag. </p>\n' },
-      'codeFiles': ['col/tag.vue']
+      'desc': {
+        'zh-CN': `<p>
+            通过使用 <code>Layout / Row / Col </code> 组件的 <code>tag</code> 属性实现自定义元素标签，可选任意标签。默认使用 <code>div</code> 
+          </p>`,
+        'en-US': `<p>
+            Custom element tags can be created by using the <code>tag</code> attribute of the <code>Layout/Row/Col </code> component. Default <code>div</code>
+          </p>`
+      },
+      'codeFiles': ['tag.vue']
     }
   ],
   apis: [
@@ -132,42 +114,49 @@ export default {
       'slots': [],
       'layout-attrs': [
         {
-          'name': 'tag',
-          'type': 'string',
-          'defaultValue': '该属性的默认值为 div',
-          'desc': { 'zh-CN': '标签', 'en-US': '' },
-          'demoId': 'tag1'
+          'name': 'cols',
+          'type': 'number',
+          'defaultValue': '12',
+          'desc': {
+            'zh-CN': '总栅格数;该属性的可选值为 12 /24 ',
+            'en-US': 'Total number of grids; The optional value for this attribute is 12/24'
+          },
+          'demoId': 'basic-usage'
         },
         {
-          'name': 'size',
+          'name': 'tag',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 medium',
-          'desc': { 'zh-CN': '大小;该属性的可选值为 medium / small / mini', 'en-US': '' },
-          'demoId': ''
-        }
-      ],
-      'layout-slots': [
-        {
-          'name': 'default',
-          'type': '',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '默认插槽', 'en-US': '' },
-          'demoId': 'base'
+          'defaultValue': 'div',
+          'desc': {
+            'zh-CN': '定义 Layout 元素的渲染后的标签，默认为div',
+            'en-US': 'Defines the rendered tag of a Layout element, which defaults to div'
+          },
+          'demoId': 'tag'
         }
       ],
       'row-attrs': [
+        {
+          'name': 'align',
+          'type': 'string',
+          'defaultValue': 'top',
+          'desc': {
+            'zh-CN': "子项的副轴对齐方向，可取值：'top', 'middle', 'bottom'",
+            'en-US': `Alignment of minor axes for child items; values: 'top', 'middle', 'bottom'`
+          },
+          'demoId': 'alignment'
+        },
         {
           'name': 'flex',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '是否为flex容器', 'en-US': '' },
+          'desc': { 'zh-CN': '是否为flex容器', 'en-US': 'Whether it is a flex container' },
           'demoId': 'alignment'
         },
         {
           'name': 'gutter',
           'type': 'number',
-          'defaultValue': '0',
-          'desc': { 'zh-CN': '子项的间隔的像素', 'en-US': '' },
+          'defaultValue': '20',
+          'desc': { 'zh-CN': '子项的间隔的像素', 'en-US': 'The spacing of the child items in pixels' },
           'demoId': 'gutter'
         },
         {
@@ -176,81 +165,87 @@ export default {
           'defaultValue': 'start',
           'desc': {
             'zh-CN': "子项的主轴对齐方向，可取值：'start', 'center', 'end', 'space-between', 'space-around'",
-            'en-US': ''
+            'en-US': `Main axis alignment direction for child items; values: 'start', 'center', 'end', 'space-between', 'space-around'`
           },
           'demoId': 'alignment'
         },
-        {
-          'name': 'align',
-          'type': 'string',
-          'defaultValue': 'top',
-          'desc': { 'zh-CN': "子项的副轴对齐方向，可取值：'top', 'middle', 'bottom'", 'en-US': '' },
-          'demoId': 'alignment'
-        },
         {
           'name': 'order',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': "子项的排序方式，可取值：'asc', 'des'。 不设置时，保留子项在模板中的顺序。", 'en-US': '' },
-          'demoId': 'order1'
+          'desc': {
+            'zh-CN': "子项的排序方式，可取值：'asc', 'des'。 不设置时，保留子项在模板中的顺序。",
+            'en-US': `Ordering of the child items; values: 'asc', 'des'. When not set, the order of the child items in the template is preserved.`
+          },
+          'demoId': 'order'
         },
         {
           'name': 'tag',
           'type': 'string',
           'defaultValue': 'div',
-          'desc': { 'zh-CN': '定义 Row 元素的渲染后的标签，默认为div', 'en-US': '' },
-          'demoId': 'tag1'
-        },
-        {
-          'name': 'noSpace',
-          'type': 'boolean',
-          'defaultValue': 'false',
-          'desc': { 'zh-CN': '子项没有间隔，相当于gutter=0的时候', 'en-US': '' },
-          'demoId': ''
+          'desc': {
+            'zh-CN': '定义 Row 元素的渲染后的标签，默认为div',
+            'en-US': 'Defines the rendered tag of a Row element, which defaults to div'
+          },
+          'demoId': 'tag'
         }
       ],
       'col-attrs': [
         {
-          'name': 'span',
-          'type': 'number',
-          'defaultValue': '12',
-          'desc': { 'zh-CN': '子项占据的列数', 'en-US': '' },
-          'demoId': 'base'
-        },
-        {
-          'name': 'offset',
+          'name': 'move',
           'type': 'number',
           'defaultValue': '0',
-          'desc': { 'zh-CN': '子项的左偏移量', 'en-US': '' },
+          'desc': {
+            'zh-CN': '子项的右偏移量,是通过 left 属性实现偏移,建议使用 offset 代替',
+            'en-US':
+              'The right offset of the child item is offset via the left property; it is recommended to use offset instead'
+          },
           'demoId': 'offset'
         },
         {
           'name': 'no',
           'type': 'number',
           'defaultValue': '0',
-          'desc': { 'zh-CN': '子项排序编号', 'en-US': '' },
-          'demoId': 'order1'
+          'desc': { 'zh-CN': '子项排序编号', 'en-US': 'Subitems are sorted by number' },
+          'demoId': 'order'
         },
         {
-          'name': 'move',
+          'name': 'offset',
           'type': 'number',
           'defaultValue': '0',
-          'desc': { 'zh-CN': '子项的右偏移量', 'en-US': '' },
-          'demoId': 'col-move'
+          'desc': {
+            'zh-CN': '子项的向右偏移量,是通过 margin-left 属性实现偏移',
+            'en-US': 'The offset to the right of the child item is achieved using the margin-left property'
+          },
+          'demoId': 'offset'
         },
         {
-          'name': 'xs/sm/md/lg/xl',
-          'type': 'number, object',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '响应式栅格数或者栅格属性对象', 'en-US': '' },
-          'demoId': 'responsive-layout'
+          'name': 'span',
+          'type': 'number',
+          'defaultValue': '12',
+          'desc': { 'zh-CN': '子项占据的列数', 'en-US': 'Number of columns occupied by the child' },
+          'demoId': 'basic-usage'
         },
         {
           'name': 'tag',
           'type': 'string',
           'defaultValue': 'div',
-          'desc': { 'zh-CN': '子项渲染后的标签', 'en-US': '' },
-          'demoId': ''
+          'desc': {
+            'zh-CN': '定义 Col 元素的渲染后的标签，默认为div',
+            'en-US': 'Defines the rendered tag of a Col element, which defaults to div'
+          },
+          'demoId': 'tag'
+        },
+        {
+          'name': 'xs/sm/md/lg/xl',
+          'type': 'number',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '指定列占用响应式栅格数，响应式断点的位置为：768 / 992 / 1200 / 1920',
+            'en-US':
+              'Specifies the number of reactive grids occupied by the column and the location of the reactive breakpoint: 768/992/1200/1920'
+          },
+          'demoId': 'responsive-layout'
         }
       ]
     }
diff --git a/package.json b/package.json
index b6cf49325..fda9839e5 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "dev2.7:saas": "pnpm create:icon-saas && pnpm build:entry && pnpm -C examples/vue2.7 dev:saas",
     "dev:react": "pnpm create:mapping-react && pnpm build:entry-react && pnpm -C examples/react-docs run dev",
     "// ---------- 启动官网文档 ----------": "",
-    "site": "pnpm build:entry && gulp themeConcat -w & pnpm -C examples/sites start",
+    "site": "pnpm build:entry &&  pnpm -C examples/sites start",
     "site:open": "pnpm build:entry && gulp themeConcat -w & pnpm -C examples/sites start:open",
     "// ---------- 启动移动端组件官网文档 ----------": "",
     "site:mobile": "pnpm build:entry && gulp themeConcat -w & pnpm -C examples/sites start:mobile",
diff --git a/packages/renderless/src/col/index.ts b/packages/renderless/src/col/index.ts
index c5c953cbd..95c3f8a1c 100644
--- a/packages/renderless/src/col/index.ts
+++ b/packages/renderless/src/col/index.ts
@@ -44,9 +44,9 @@ export const setGlobalAttrValue = ({ attr, className, value }) => {
 }
 
 export const getClassName =
-  ({ api, props }) =>
+  ({ api, props, state }) =>
   () => {
-    const multiple = 2
+    const multiple = 24 / state.layout.cols
     const span = props.span * multiple
     const offset = props.offset
     const push = props.move ? props.move : 0
@@ -120,15 +120,10 @@ export const getStyle =
     const no = props.no
     const styles = []
     let gutter = parent ? parent.gutter : null
-    let noSpace = parent ? parent.noSpace : null
     let order = ''
 
-    if (gutter) {
-      gutter = gutter / 2
-      styles.push(`padding-left:${gutter}px;padding-right:${gutter}px;`)
-    } else if (noSpace) {
-      styles.push('padding-left:0;padding-right:0;')
-    }
+    gutter = gutter / 2
+    styles.push(`padding-left:${gutter}px;padding-right:${gutter}px;`)
 
     if (parent && parent.flex && parent.order) {
       /* istanbul ignore next  */
diff --git a/packages/renderless/src/col/vue.ts b/packages/renderless/src/col/vue.ts
index 1f568609d..1e3005d92 100644
--- a/packages/renderless/src/col/vue.ts
+++ b/packages/renderless/src/col/vue.ts
@@ -14,12 +14,13 @@ import { setSubitemAttrValue, setGlobalAttrValue, getClassName, getStyle, row }
 
 export const api = ['state']
 
-export const renderless = (props, { computed, reactive }, { parent }) => {
+export const renderless = (props, { computed, reactive, inject }, { parent }) => {
   const api = {}
   const state = reactive({
     row: computed(() => api.row()),
     style: computed(() => api.getStyle()),
-    className: computed(() => api.getClassName())
+    className: computed(() => api.getClassName()),
+    layout: inject('layout')
   })
 
   Object.assign(api, {
@@ -28,7 +29,7 @@ export const renderless = (props, { computed, reactive }, { parent }) => {
     setGlobalAttrValue,
     setSubitemAttrValue,
     getStyle: getStyle({ props, state }),
-    getClassName: getClassName({ api, props })
+    getClassName: getClassName({ api, props, state })
   })
 
   return api
diff --git a/packages/vue/src/layout/src/index.ts b/packages/vue/src/layout/src/index.ts
index fed18d176..46e26f242 100644
--- a/packages/vue/src/layout/src/index.ts
+++ b/packages/vue/src/layout/src/index.ts
@@ -25,10 +25,10 @@ export default defineComponent({
       type: String,
       default: 'div'
     },
-    size: {
-      type: String,
-      default: 'medium',
-      validator: (value: string) => Boolean(~['medium', 'small', 'mini'].indexOf(value))
+    cols: {
+      type: Number,
+      default: 12,
+      validator: (value: string) => Boolean(~[12, 24].indexOf(value))
     }
   },
   setup(props, context) {
diff --git a/packages/vue/src/row/src/index.ts b/packages/vue/src/row/src/index.ts
index 6eec62c61..55c187c8f 100644
--- a/packages/vue/src/row/src/index.ts
+++ b/packages/vue/src/row/src/index.ts
@@ -20,7 +20,7 @@ export default defineComponent({
     flex: Boolean,
     gutter: {
       type: Number,
-      default: 0,
+      default: 20,
       validator(value: number) {
         return value >= 0
       }
@@ -42,10 +42,6 @@ export default defineComponent({
     tag: {
       type: String,
       default: 'div'
-    },
-    noSpace: {
-      type: Boolean,
-      default: false
     }
   },
   setup(props, context) {
diff --git a/packages/vue/src/row/src/pc.vue b/packages/vue/src/row/src/pc.vue
index a87a54d3a..83a12778d 100644
--- a/packages/vue/src/row/src/pc.vue
+++ b/packages/vue/src/row/src/pc.vue
@@ -20,7 +20,7 @@ import { renderless, api } from '@opentiny/vue-renderless/row/vue'
 import { props, setup, defineComponent } from '@opentiny/vue-common'
 
 export default defineComponent({
-  props: [...props, 'flex', 'gutter', 'justify', 'align', 'order', 'tag', 'noSpace'],
+  props: [...props, 'flex', 'gutter', 'justify', 'align', 'order', 'tag'],
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }