update docs

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>

zh-cn/application-dev/ui/ui-ts-layout-grid-container-new.md

 # 栅格布局
 
 栅格组件[GridRow](../reference/arkui-ts/ts-container-gridrow.md)和[GridCol](../reference/arkui-ts/ts-container-gridcol.md)
-相对于[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)提供了更灵活、更全面的栅格系统实现方案。其中GridRow为栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。GridCol作为栅格子组件使用。
+相对于[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)提供了更灵活、更全面的栅格系统实现方案。其中GridRow为栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。
+
 
 ## 栅格容器GridRow
 
-栅格布局的列数，间隔，排列方向和断点由GridRow组件的columns、gutter、direction、breakpoints四个关键特性决定。
 
-### 栅格布局的总列数
+栅格容器有columns、gutter、direction、breakpoints四个属性。
+- columns: 栅格布局的主要定位工具，设置栅格布局的总列数。
+- gutter: 设置元素之间的距离，决定内容间的紧密程度。
+- direction: 设置栅格子组件在栅格容器中的排列方向。
+- breakpoints：以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者可根据需要在不同的区间下实现不同的页面布局效果。
+
+
+首次通过设置断点位置，得到一系列断点区间；其次，借助栅格组件能力监听应用窗口大小的变化，判断应用当前处于哪个断点区间，进而可以调整应用的布局，实现栅格布局。
+
+### 栅格系统断点
+
+断点以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者根据需求在不同的区间实现不同的页面布局效果。
+[栅格系统默认断点](ui-ts-layout-grid-container.md#系统栅格断点)将设备宽度分为xs、sm、md、lg四类，尺寸范围如下：
+
+| 断点名称  | 取值范围（vp）| 
+| --------| ------ | 
+| xs | [0, 320）   | 
+| sm | [320, 520) | 
+| md | [520, 840) | 
+| lg | [840, +∞)  | 
+
+在GridRow新栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，
+还可以启用xl，xxl两个断点，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的布局设置。
+
+| 断点名称 | 设备描述        |
+| ----- | ---------------------------------------- |
+| xs  | 最小宽度类型设备。    |
+| sm   | 小宽度类型设备。      |
+| md   | 中等宽度类型设备。    |
+| lg  | 大宽度类型设备。      |
+| xl   | 特大宽度类型设备。    |
+| xxl | 超大宽度类型设备。    |
+
+- 针对断点位置，开发者根据实际使用场景，通过一个单调递增数组设置。由于breakpoints最多支持六个断点，单调递增数组长度最大为5。
+
+  ```ts
+  breakpoints: {value: ["100vp", "200vp"]}
+  ```
+
+  表示启用xs、sm、md共3个断点，小于100vp为xs，100vp-200vp为sm，大于200vp为md。
 
-栅格布局的主要定位工具，设置栅格布局的总列数。
+  ```ts
+  breakpoints: {value: ["320vp", "520vp", "840vp", "1080vp"]}
+  ```
+
+  表示启用xs、sm、md、lg、xl共5个断点，小于320vp为xs，320vp-520vp为sm，520vp-840vp为md，840vp-1080vp为lg，大于1080vp为xl。
+
+
+- 栅格系统通过监听窗口或容器的尺寸变化进行断点，通过reference设置断点切换参考物。 考虑到应用可能以非全屏窗口的形式显示，以应用窗口宽度为参照物更为通用。
+
+下例中，使用栅格的默认列数12列，通过断点设置将应用宽度分成六个区间，在各区间中，每个栅格子元素占用的列数均不同。效果如图：
+  ```ts
+GridRow({
+  breakpoints: {
+    value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
+    reference: BreakpointsReference.WindowSize
+  }
+}) {
+     ForEach(this.bgColors, (color, index) => {
+       GridCol({
+         span: {
+           xs: 2,
+           sm: 3,
+           md: 4,
+           lg: 6,
+           xl: 8,
+           xxl: 12
+         }
+       }) {
+         Row() {
+           Text(${index})
+         }.width("100%").height("50vp")
+       }.backgroundColor(color)
+     })
+}                                                                    
+```
 
-* 当columns类型为number时，栅格布局在任何尺寸设备下都被分为columns列。当未设置columns时，使用系统默认的值，将栅格布局分成12列。
+![](figures/breakpoints.gif)
   
 
-```ts
-  GridRow({}) {
-    ForEach(this.bgColors, (color, index) => {
+
+### 栅格布局的总列数
+
+GridRow中通过columns设置栅格布局的总列数。
+
+- columns默认值为12，当未设置columns时，在任何断点下，栅格布局被分成12列。
+   ```ts
+  GridRow() {
+    ForEach(this.bgColors, (item, index) => {
       GridCol() {
         Row() {
-          Text(${index})
-        }.width("100%").height("50")                 
-      }
-      .backgroundColor(color)
-      .span(2)  
+          Text(`${index + 1}`)
+        }.width("100%").height("50")
+      }.backgroundColor(item)
     })
   }           
   ```
 
   ![](figures/columns1.png)
-  
-  如上所示，栅格系统默认分成12列，每一个子组件占2列，前6个子组件在第一排。
 
-* 当columns类型为GridRowColumnOption时，支持下面六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的总列数设置，各个尺寸下数值可不同。
+- 当columns类型为number时，栅格布局在任何尺寸设备下都被分为columns列。下面分别设置栅格布局列数为4和8，子元素默认占一列，效果如下：
+
+  ```ts
+  Row() {
+    GridRow({ columns: 4 }) {
+      ForEach(this.bgColors, (item, index) => {
+        GridCol() {
+          Row() {
+            Text(`${index + 1}`)
+          }.width("100%").height("50")
+        }.backgroundColor(item)
+      })
+    }
+    .width("100%").height("100%")
+    .onBreakpointChange((breakpoint) => {
+      this.currentBp = breakpoint
+    })
+  }
+  .height(160)
+  .border({ color: Color.Blue, width: 2 })
+  .width('90%')
   
+  Row() {
+    GridRow({ columns: 8 }) {
+      ForEach(this.bgColors, (item, index) => {
+        GridCol() {
+          Row() {
+            Text(`${index + 1}`)
+          }.width("100%").height("50")
+        }.backgroundColor(item)
+      })
+    }
+    .width("100%").height("100%")
+    .onBreakpointChange((breakpoint) => {
+      this.currentBp = breakpoint
+    })
+  }
+  .height(160)
+  .border({ color: Color.Blue, width: 2 })
+  .width('90%')
+  ```
+  
+  ![](figures/columns2.png)
+
+
+- 当columns类型为GridRowColumnOption时，支持下面六种不同尺寸（xs, sm, md, lg, xl, xxl）设备的总列数设置，各个尺寸下数值可不同。
 
-```ts
-  columns: {sm: 8, md: 10} 
+  ```ts
+  GridRow({ columns: { sm: 4, md: 8 }, breakpoints: { value: ['200vp', '300vp', '400vp', '500vp', '600vp'] } }) {
+    ForEach(this.bgColors, (item, index) => {
+      GridCol() {
+        Row() {
+          Text(`${index + 1}`)
+        }.width("100%").height("50")
+      }.backgroundColor(item)
+    })
+  }
   ```
+  ![](figures/columns3.gif)
 
-  如上，若只设置sm, md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里详单与设置了，xs:12, sm:8, md:10, lg:10, xl:10, xxl:10。
+  如上，若只设置sm, md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里只设置sm:8, md:10，则较小尺寸的xs:12，较大尺寸的参照md的设置，lg:10, xl:10, xxl:10。
 
 ### 栅格子组件间距
 
-GridRow的gutter属性设置元素之间的距离，决定内容间的紧密程度。
+GridRow中通过gutter设置子元素在水平和垂直方向的间距。
 
-* 当类型为number时，同时设置栅格子组件间的水平垂直边距且相等。
-  
+- 当gutter类型为number时，同时设置栅格子组件间水平和垂直方向边距且相等。下例中，设置子组件水平与垂直方向距离相邻元素的间距为10。
 
-```ts
-  GridRow({ gutter: 10 }){}
+  ```ts
+   GridRow({ gutter: 10 }){}
   ```
 
   ![](figures/gutter1.png)
   
-  上例中，子组件水平与垂直方向距离相邻元素的间距为10。
-
-* 当类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距。
   
 
-```ts
+- 当gutter类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距。
+
+  ```ts
   GridRow({ gutter: { x: 20, y: 50 } }){}
   ```
 
   ![](figures/gutter2.png)  
 
+
+
 ### 排列方向
 
 通过GridRow的direction属性设置栅格子组件在栅格容器中的排列方向。
 
-* 子组件默认从左往右排列。
-  
+- 子组件默认从左往右排列。
 
-```ts
+  ```ts
   GridRow({ direction: GridRowDirection.Row }){}
   ```
-
-  
   ![](figures/direction1.png)
 
-* 子组件从右往左排列。
-  
+- 子组件从右往左排列。
 
-```ts
+  ```ts
   GridRow({ direction: GridRowDirection.RowReverse }){}
   ```
-
   
   ![](figures/direction2.png)
 
-### 栅格系统断点
-
-断点以设备宽度为基准，将应用宽度分成了几个不同的区间，即不同的断点。开发者可根据需要在不同的区间下实现不同的页面布局效果。
-[栅格系统默认断点](ui-ts-layout-grid-container.md#系统栅格断点)将设备宽度分为xs、sm、md、lg四类，尺寸范围如下：
-
-| 断点名称  | 取值范围（vp）| 
-| --------| ------ | 
-| xs | [0, 320）   | 
-| sm | [320, 520) | 
-| md | [520, 840) | 
-| lg | [840, +∞)  | 
-
-在GridRow新栅格组件中，允许开发者使用breakpoints自定义修改断点的取值范围，最多支持6个断点，除了默认的四个断点外，还可以启用xl，xxl两个断点。
-
-* 针对断点位置，开发者可以根据实际使用场景，通过一个单调递增数组设置，例如：
-  
-
-```ts
-  breakpoints: {value: ["100vp", "200vp"]}
-  ```
-
-  表示启用xs、sm、md共3个断点，小于100vp为xs，100vp-200vp为sm，大于200vp为md。
-  
-  
 
-```ts
-  breakpoints: {value: ["320vp", "520vp", "840vp", "1080vp"]}
-  ```
-
-  表示启用xs、sm、md、lg、xl共5个断点，breakpoints最多支持六个断点，断点范围数量value数组值的个数最多为5。
-* 设置以窗口或者容器为断点切换参考物，实现栅格系统监听对象设置。 考虑到应用可能以非全屏窗口的形式显示，以应用窗口宽度为参照物更为通用。
-
-  breakpoints示例如下：
-  
-
-```ts
-  GridRow({
-    breakpoints: {
-      value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
-      reference: BreakpointsReference.WindowSize
-    }
-  }) {
-       ForEach(this.bgColors, (color, index) => {
-         GridCol({
-           span: {
-             xs: 2,
-             sm: 3,
-             md: 4,
-             lg: 6,
-             xl: 8,
-             xxl: 12
-           }
-         }) {
-           Row() {
-             Text(${index})
-           }.width("100%").height("50vp")
-         }.backgroundColor(color)
-  
-       })
-  }                                                                    
-  ```
-
-  ![](figures/breakpoints.gif)
-
-首次通过设置断点位置，得到一系列断点区间；其次，借助栅格组件能力监听应用窗口大小的变化，判断应用当前处于哪个断点区间，进而可以调整应用的布局，实现栅格布局。
 
 ## 栅格子组件GridCol
 
 GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设置属性两种方式，设置span，offset，order的值。
 
+- span的设置
 
-* span的设置
-  
-
-```ts
+  ```ts
   GridCol({ span: 2 }){}
   GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
   GridCol(){}.span(2)
   GridCol(){}.span({ xs: 1, sm: 2, md: 3, lg: 4 })
   ```
 
-* offset的设置
-  
+- offset的设置
 
-```ts
+  ```ts
   GridCol({ offset: 2 }){}
   GridCol({ offset: { xs: 2, sm: 2, md: 2, lg: 2 } }){}
   GridCol(){}.offset(2)
   GridCol(){}.offset({ xs: 1, sm: 2, md: 3, lg: 4 }) 
   ```
 
-* order的设置
-  
+- order的设置
 
-```ts
+  ```ts
   GridCol({ order: 2 }){}
   GridCol({ order: { xs: 1, sm: 2, md: 3, lg: 4 } }){}
   GridCol(){}.order(2)
   GridCol(){}.order({ xs: 1, sm: 2, md: 3, lg: 4 })
   ```
 
-  下面使用参数的方式演示各属性的使用
+  下面使用传参的方式演示各属性的使用。
 
 ### span
 
 子组件占栅格布局的列数，决定了子组件的宽度，默认为1。
 
-* 当类型为number时，子组件在所有尺寸设备下占用的列数相同。
-  
+- 当类型为number时，子组件在所有尺寸设备下占用的列数相同。
 
-```ts
+  ```ts
   GridRow({ columns: 8 }) {
     ForEach(this.bgColors, (color, index) => {
       GridCol({ span: 2 }) {      
@@ -215,9 +269,8 @@ GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设
   ![](figures/span1.png)
 
 - 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。
-  
 
-```ts
+  ```ts
   GridRow({ columns: 8 }) {
     ForEach(this.bgColors, (color, index) => {
       GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {      
@@ -235,10 +288,9 @@ GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设
 ### offset
 
 栅格子组件相对于前一个子组件的偏移列数，默认为0。
-* 当类型为number时，子组件偏移相同列数。
-  
+- 当类型为number时，子组件偏移相同列数。
 
-```ts
+  ```ts
   GridRow() {
     ForEach(this.bgColors, (color, index) => {
       GridCol({ offset: 2 }) {      
@@ -252,12 +304,13 @@ GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设
   ```
 
   ![](figures/offset1.png)
+
   栅格默认分成12列，每一个子组件默认占1列，偏移2列，每个子组件及间距共占3列，一行放四个子组件。
 
+
 - 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件所占列数设置,各个尺寸下数值可不同。
-  
 
-```ts
+  ```ts
   GridRow() {
     ForEach(this.bgColors, (color, index) => {
       GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } }) {      
@@ -276,35 +329,62 @@ GridCol组件作为GridRow组件的子组件，通过给GridCol传参或者设
 
   栅格子组件的序号，决定子组件排列次序。当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件设置不同的order时，order较大的组件在前，较小的在后。
   当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从大到小排列。
-* 当类型为number时，子组件在任何尺寸下排序次序一致。
-
-```ts
-GridRow() {
-  GridCol({ order: 5 }) {
-    Row() {
-      Text("1")
-    }.width("100%").height("50vp")
-  }.backgroundColor(Color.Red)
-  GridCol({ order: 4 }) {
-    Row() {
-      Text("2")
-    }.width("100%").height("50vp")
-  }.backgroundColor(Color.Orange)
-  GridCol({ order: 3 }) {
-    Row() {
-      Text("3")
-    }.width("100%").height("50vp")
-  }.backgroundColor(Color.Yellow)
-  GridCol({ order: 2 }) {
-    Row() {
-      Text("4")
-    }.width("100%").height("50vp")
-  }.backgroundColor(Color.Green)
-}            
-```
+
+
+- 当类型为number时，子组件在任何尺寸下排序次序一致。
+
+  ```ts
+  GridRow() {
+    GridCol({ order: 5 }) {
+      Row() {
+        Text("1")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Red)
+    GridCol({ order: 4 }) {
+      Row() {
+        Text("2")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Orange)
+    GridCol({ order: 3 }) {
+      Row() {
+        Text("3")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Yellow)
+    GridCol({ order: 2 }) {
+      Row() {
+        Text("4")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Green)
+  }            
+  ```
 
   ![](figures/order1.png)
-* 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件排序次序设置。
+- 当类型为GridColColumnOption时，支持六种不同尺寸（xs, sm, md, lg, xl, xxl）设备中子组件排序次序设置。
+
+  ```ts
+  GridRow() {
+    GridCol({ order: { xs:1, sm:5, md:3, lg:7}}) {
+      Row() {
+        Text("1")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Red)
+    GridCol({ order: { xs:2, sm:2, md:6, lg:1} }) {
+      Row() {
+        Text("2")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Orange)
+    GridCol({ order: { xs:3, sm:3, md:1, lg:6} }) {
+      Row() {
+        Text("3")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Yellow)
+    GridCol({ order: { xs:4, sm:4, md:2, lg:5} }) {
+      Row() {
+        Text("4")
+      }.width("100%").height("50vp")
+    }.backgroundColor(Color.Green)
+  } 
+  ```
 
   ![](figures/order2.gif)
 

zh-cn/application-dev/ui/ui-ts-layout-grid-container.md

@@ -43,35 +43,30 @@
 
 首先使用栅格容器组件创建栅格布局。
 
-### 创建栅格容器
+### 栅格容器创建与设置
 
 通过接口 `GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})` 创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。
 
-* 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp：
+通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp：
 
-  
 
 ```ts
-  GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
-  ```
-
-  栅格容器不设置参数，或者sizeType设置为SizeType. Auto时使用默认的栅格系统定义，如：
+GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
+```
 
-  
+栅格容器不设置参数，或者sizeType设置为SizeType. Auto时使用默认的栅格系统定义，如：
 
 ```ts
-  GridContainer() {}
-  ```
-
-    
+GridContainer() {}
+```
 
 ```ts
-    GridContainer({ sizeType: SizeType.Auto })
-    ```
+GridContainer({ sizeType: SizeType.Auto })
+```
 
-  上述例子中，默认在小宽度类型设备(SizeType. SM)上，栅格容器被分为4列，列与列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType. MD)上，栅格容器被分为8列，列与列的间隔为24vp，两侧边距是32vp。
+上述例子中，默认在小宽度类型设备(SizeType. SM)上，栅格容器被分为4列，列与列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType. MD)上，栅格容器被分为8列，列与列的间隔为24vp，两侧边距是32vp。
 
-* 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
+也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
 
   
 
@@ -91,7 +86,7 @@
 
   上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType. SM类型的栅格设置, 即占用3列，放置在第1列。
 
-### 栅格容器内子组件的栅格设置
+### 子组件的栅格设置
 
 栅格容器中的组件使用通用属性useSizeType设置不同的设备宽度类型的占用列数和列偏移。其中span表示栅格容器组件占据columns的数量；offset表示列偏移量，指将组件放置在哪一个columns上。 如：
 

zh-cn/application-dev/ui/ui-ts-layout-grid.md

@@ -19,19 +19,100 @@ Grid用于设置网格布局相关参数，GridItem定义子组件相关特征
 下面以columnsTemplate为例，介绍该属性的设置，该属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的列数，fr前面的数值大小，用于计算该列在网格布局宽度上的占比，最终决定该列的宽度。
 
 ```ts
-Grid().columnsTemplate('1fr 1fr 1fr 1fr')
+struct GridExample {
+  @State Number: Array<string> = ['1', '2', '3', '4']
+
+  build() {
+    Column({ space: 5 }) {
+      Grid() {
+        ForEach(this.Number, (num: string) => {
+          GridItem() {
+            Text(`列${num}`)
+              .fontSize(16)
+              .textAlign(TextAlign.Center)
+              .backgroundColor(0xd0d0d0)
+              .width('100%')
+              .height('100%')
+              .borderRadius(5)
+          }
+        })
+      }
+      .columnsTemplate('1fr 1fr 1fr 1fr')
+      .rowsTemplate('1fr')
+      .columnsGap(10)
+      .rowsGap(20)
+      .width('90%')
+      .backgroundColor(0xF0F0F0)
+      .height(100)
+    }.width('100%')
+  }
+}
 ```
 
 定义了四个等分的列，每列宽度相等。
 
 ```ts
-Grid().columnsTemplate('1fr 2fr 3fr 4fr')
+struct GridExample {
+  @State Number: Array<string> = ['1', '2', '3', '4']
+
+  build() {
+    Column({ space: 5 }) {
+      Grid() {
+        ForEach(this.Number, (num: string) => {
+          GridItem() {
+            Text(`列${num}`)
+              .fontSize(16)
+              .textAlign(TextAlign.Center)
+              .backgroundColor(0xd0d0d0)
+              .width('100%')
+              .height('100%')
+              .borderRadius(5)
+          }
+        })
+      }
+      .columnsTemplate('1fr 2fr 3fr 4fr')
+      .rowsTemplate('1fr')
+      .columnsGap(10)
+      .rowsGap(20)
+      .width('90%')
+      .backgroundColor(0xF0F0F0)
+      .height(100)
+    }.width('100%')
+  }
+}
 ```
 
 定义了四列，每列宽度比值为1:2:3:4。
 
 ```ts
-Grid().columnsTemplate('4fr 2fr 3fr')
+struct GridExample {
+  @State Number: Array<string> = ['1', '2', '3']
+
+  build() {
+    Column({ space: 5 }) {
+      Grid() {
+        ForEach(this.Number, (num: string) => {
+          GridItem() {
+            Text(`列${num}`)
+              .fontSize(16)
+              .textAlign(TextAlign.Center)
+              .backgroundColor(0xd0d0d0)
+              .width('100%')
+              .height('100%')
+              .borderRadius(5)
+          }
+        })
+      }
+      .columnsTemplate('4fr 2fr 3fr')
+      .rowsTemplate('1fr')
+      .columnsGap(10)
+      .rowsGap(20)
+      .width('90%')
+      .backgroundColor(0xF0F0F0)
+      .height(100)
+    }.width('100%')
+  }
+}
 ```
 
 定义了三列，每列宽度比值为4:2:3。

zh-cn/application-dev/ui/ui-ts-layout-linear.md

@@ -13,23 +13,11 @@
 
 具体使用以及效果如下表所示：
 
-  |属性名|描述|Row效果图|Column效果图|
-  |------|---------------------------|----------------------------|---------------------------|
-  |space |- 横向布局中各子组件的在水平方向的间距<br> - 纵向布局中个子组件垂直方向间距|   
-
-![](figures/rowspace.png)      |   ![](figures/columnspace.png)
-
-|
-  |alignItems |容器排列方向的垂直方向上，子组件在父容器中的对齐方式|   
-
-![](figures/rowalign.png)            |![](figures/columnalign.png)
-
- |
-  |justifyContent |容器排列方向上，子组件在父容器中的对齐方式 |   
-
-![](figures/rowjustify.png)            |![](figures/columnjustify.png)
-
-|
+|属性名|描述|Row效果图|Column效果图|
+|------|---------------------------|----------------------------|---------------------------|
+|space |- 横向布局中各子组件的在水平方向的间距<br> - 纵向布局中个子组件垂直方向间距|   ![](figures/rowspace.png)      |   ![](figures/columnspace.png) |
+|alignItems |容器排列方向的垂直方向上，子组件在父容器中的对齐方式|![](figures/rowalign.png)            |![](figures/columnalign.png)|
+|justifyContent |容器排列方向上，子组件在父容器中的对齐方式 |![](figures/rowjustify.png)            |![](figures/columnjustify.png)|
 
 ## 自适应拉伸
 
@@ -61,50 +49,50 @@ struct BlankExample {
     
 
   ```ts
-    @Entry
-    @Component
-    struct layoutWeightExample {
-      build() {
-        Column() {
-          Text('1:2:3').width('100%')
-          Row() {
-            Column() {
-              Text('layoutWeight(1)')
-                .textAlign(TextAlign.Center)
-            }.layoutWeight(2).backgroundColor(0xffd306).height('100%')
-    
-            Column() {
-              Text('layoutWeight(2)')
-                .textAlign(TextAlign.Center)
-            }.layoutWeight(4).backgroundColor(0xffed97).height('100%')
-    
-            Column() {
-              Text('layoutWeight(6)')
-                .textAlign(TextAlign.Center)
-            }.layoutWeight(6).backgroundColor(0xffd306).height('100%')
-    
-          }.backgroundColor(0xffd306).height('30%')
-    
-          Text('2:5:3').width('100%')
-          Row() {
-            Column() {
-              Text('layoutWeight(2)')
-                .textAlign(TextAlign.Center)
-            }.layoutWeight(2).backgroundColor(0xffd306).height('100%')
-    
-            Column() {
-              Text('layoutWeight(5)')
-                .textAlign(TextAlign.Center)
-            }.layoutWeight(5).backgroundColor(0xffed97).height('100%')
-    
-            Column() {
-              Text('layoutWeight(3)')
-                .textAlign(TextAlign.Center)
-            }.layoutWeight(3).backgroundColor(0xffd306).height('100%')
-          }.backgroundColor(0xffd306).height('30%')
-        }
+  @Entry
+  @Component
+  struct layoutWeightExample {
+    build() {
+      Column() {
+        Text('1:2:3').width('100%')
+        Row() {
+          Column() {
+            Text('layoutWeight(1)')
+              .textAlign(TextAlign.Center)
+          }.layoutWeight(2).backgroundColor(0xffd306).height('100%')
+  
+          Column() {
+            Text('layoutWeight(2)')
+              .textAlign(TextAlign.Center)
+          }.layoutWeight(4).backgroundColor(0xffed97).height('100%')
+  
+          Column() {
+            Text('layoutWeight(6)')
+              .textAlign(TextAlign.Center)
+          }.layoutWeight(6).backgroundColor(0xffd306).height('100%')
+  
+        }.backgroundColor(0xffd306).height('30%')
+  
+        Text('2:5:3').width('100%')
+        Row() {
+          Column() {
+            Text('layoutWeight(2)')
+              .textAlign(TextAlign.Center)
+          }.layoutWeight(2).backgroundColor(0xffd306).height('100%')
+  
+          Column() {
+            Text('layoutWeight(5)')
+              .textAlign(TextAlign.Center)
+          }.layoutWeight(5).backgroundColor(0xffed97).height('100%')
+  
+          Column() {
+            Text('layoutWeight(3)')
+              .textAlign(TextAlign.Center)
+          }.layoutWeight(3).backgroundColor(0xffd306).height('100%')
+        }.backgroundColor(0xffd306).height('30%')
       }
     }
+  }
   ```
 
   ![](figures/layoutWeight.gif)
@@ -112,7 +100,7 @@ struct BlankExample {
 2. 父容器尺寸确定时，使用百分比设置子组件以及兄弟组件的width宽度，可以保证各自元素在任意尺寸下的自适应占比。
   
 
-```ts
+  ```ts
   @Entry
   @Component
   struct WidthExample {
@@ -149,7 +137,7 @@ struct BlankExample {
   使用组件的[offset属性](../reference/arkui-ts/ts-universal-attributes-location.md)可以实现相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。
   
 
-```ts
+  ```ts
   @Entry
   @Component
   struct OffsetExample {
@@ -179,7 +167,7 @@ struct BlankExample {
       .margin({ top: 25 })
     }
   } 
-  ```
+   ```
 
   ![](figures/offset.gif)
 
@@ -188,7 +176,7 @@ struct BlankExample {
   线性布局中可以使用组件的[positon属性](../reference/arkui-ts/ts-universal-attributes-location.md)实现绝对布局（AbsoluteLayout），设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备，使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷。
   
 
-```ts
+  ```ts
   @Entry
   @Component
   struct PositionExample {
@@ -305,7 +293,7 @@ struct BlankExample {
 
   ![](figures/listrow.gif)
 
-* Scroll组件
+- Scroll组件
 
   线性布局中，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动，再内容外层包裹一个可滚动的容器组件Scroll，
   

zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md

@@ -10,7 +10,7 @@
 
 ## 媒体查询引入与使用流程
 
-通过调用媒体查询接口，设置媒体查询条件和查询结果的回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑。具体步骤如下：
+媒体查询通过媒体查询接口，设置查询条件并绑定回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑，实现页面的响应式设计。具体步骤如下：
 
 首先导入媒体查询模块。
 
@@ -18,13 +18,13 @@
 import mediaquery from '@ohos.mediaquery'
 ```
 
-然后通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄listener，例如：
+通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄listener。
 
 ```ts
 listener = mediaquery.matchMediaSync('(orientation: landscape)')
 ```
 
-给条件监听句柄listener绑定回调函数onPortrait，当listener检测设备状态变化时执行回调函数。在回调函数内，根据不同设备状态更改页面布局或者实现业务逻辑，例如：
+给条件监听句柄listener绑定回调函数onPortrait，当listener检测设备状态变化时执行回调函数。在回调函数内，根据不同设备状态更改页面布局或者实现业务逻辑。
 
 ```ts
 onPortrait(mediaQueryResult) {
@@ -115,42 +115,40 @@ listener.on('change', onPortrait)
 
 下例中使用媒体查询，实现屏幕横竖屏切换时给页面文本应用不同的内容和样式的效果。
 
-  
+```ts
+import mediaquery from '@ohos.mediaquery'
+let portraitFunc = null
 
-```
-  import mediaquery from '@ohos.mediaquery'
-  let portraitFunc = null
-  
-  @Entry
-  @Component
-  struct MediaQueryExample {
-    @State color: string = '#DB7093'
-    @State text: string = 'Portrait'
-    listener = mediaquery.matchMediaSync('(orientation: landscape)')  // 当设备横屏时条件成立
-  
-    onPortrait(mediaQueryResult) {
-      if (mediaQueryResult.matches) {
-        this.color = '#FFD700'
-        this.text = 'Landscape'
-      } else {
-        this.color = '#DB7093'
-        this.text = 'Portrait'
-      }
-    }
-  
-    aboutToAppear() {
-      portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例
-      this.listener.on('change', portraitFunc)  
-    }
-  
-    build() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Text(this.text).fontSize(50).fontColor(this.color)
-      }
-      .width('100%').height('100%')
-    }
+@Entry
+@Component
+struct MediaQueryExample {
+@State color: string = '#DB7093'
+@State text: string = 'Portrait'
+listener = mediaquery.matchMediaSync('(orientation: landscape)')  // 当设备横屏时条件成立
+
+onPortrait(mediaQueryResult) {
+  if (mediaQueryResult.matches) {
+    this.color = '#FFD700'
+    this.text = 'Landscape'
+  } else {
+    this.color = '#DB7093'
+    this.text = 'Portrait'
   }
-  ```
+}
+
+aboutToAppear() {
+  portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例
+  this.listener.on('change', portraitFunc)  
+}
+
+build() {
+  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+    Text(this.text).fontSize(50).fontColor(this.color)
+  }
+  .width('100%').height('100%')
+}
+}
+```
 
 横屏下文本内容为Landscape，颜色为#FFD700。
 

zh-cn/application-dev/ui/ui-ts-layout-stack.md

@@ -24,30 +24,28 @@ BottomEnd|    底部尾端 |![](figures/stackbottomend.png)|
 Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/arkui-ts/ts-universal-attributes-z-order.md)
 属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。
 
-* 在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。
-    
-
-  ```ts
-  Stack({ alignContent: Alignment.BottomStart }) {
-    Column(){
-      Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
-    }.width(100).height(100).backgroundColor(0xffd306)
-    Column(){
-      Text('Stack子元素2').fontSize(20)
-    }.width(150).height(150).backgroundColor(Color.Pink)
-    Column(){
-      Text('Stack子元素3').fontSize(20)
-    }.width(200).height(200).backgroundColor(Color.Grey)
-  }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
-  ```
+- 在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。
+
+    ```ts
+    Stack({ alignContent: Alignment.BottomStart }) {
+        Column(){
+          Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
+        }.width(100).height(100).backgroundColor(0xffd306)
+        Column(){
+          Text('Stack子元素2').fontSize(20)
+        }.width(150).height(150).backgroundColor(Color.Pink)
+        Column(){
+          Text('Stack子元素3').fontSize(20)
+        }.width(200).height(200).backgroundColor(Color.Grey)
+    }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
+    ```
 
   ![](figures/stack2.png)
 
   上图中，最后的子元素3的尺寸大于前面的所有子元素，所以，前面两个元素完全隐藏。改变子元素1，子元素2的zIndex属性后，可以将元素展示出来。
-    
 
-  ```ts
-      Stack({ alignContent: Alignment.BottomStart }) {
+    ```ts
+    Stack({ alignContent: Alignment.BottomStart }) {
         Column(){
           Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
         }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)
@@ -57,7 +55,7 @@ Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/ar
         Column(){
           Text('Stack子元素3').fontSize(20)
         }.width(200).height(200).backgroundColor(Color.Grey)
-      }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
-  ```
-
-  ![](figures/stack1.png)
+    }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
+    ```
+  
+    ![](figures/stack1.png)