update docs

Signed-off-by: NHelloCrease <lian15@huawei.com>

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textarea.md

@@ -88,7 +88,7 @@ caretPosition(value: number): void
 ```
 @Entry
 @Component
-struct TextAreaExample2 {
+struct TextAreaExample1 {
   @State text: string = ''
   build() {
     Column() {
@@ -123,7 +123,7 @@ struct TextAreaExample2 {
 ```
 @Entry
 @Component
-struct TextAreaTest {
+struct TextAreaExample2 {
     controller: TextAreaController = new TextAreaController()
     build() {
         Column() {

zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textinput.md

@@ -100,7 +100,7 @@ caretPosition(value: number): void
 ```
 @Entry
 @Component
-struct TextAreaExample2 {
+struct TextInputExample1 {
   @State text: string = ''
 
   build() {
@@ -134,7 +134,7 @@ struct TextAreaExample2 {
 ```
 @Entry
 @Component
-struct TextInputTest {
+struct TextInputExample2 {
     @State text: string = ''
     controller: TextInputController = new TextInputController()
     build() {

zh-cn/application-dev/ui/ui-js-components-grid.md

-# Grid
+# 栅格布局
 
 
 栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。具体请参考[Grid-container](../reference/arkui-js/js-components-grid-container.md)。

zh-cn/application-dev/ui/ui-ts-creating-simple-page.md

@@ -433,7 +433,7 @@
    ```
    @Component
    struct ContentTable {
-     @Builder IngredientItem(title:string, colorValue: string, name: string, value: string) {
+     @Builder IngredientItem(title:string, name: string, value: string) {
        Flex() {
          Text(title)
            .fontSize(17.4)
@@ -531,6 +531,6 @@
 
 针对创建简单视图，有以下示例工程可供参考：
 
-- [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSBuildCommonView)
+- [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/BuildCommonView)
 
   本示例为构建了简单页面展示食物番茄的图片和营养信息，主要为了展示简单页面的Stack布局和Flex布局。

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

@@ -12,25 +12,25 @@
 
 ## 栅格系统
 
-栅格系统有Columns、Margins、Gutters三个概念。
+栅格系统有Column、Margin、Gutter三个概念。
 
 
 ![zh-cn_image_0000001217236574](figures/zh-cn_image_0000001217236574.png)
 
 
-1. Gutters：
+1. Gutter：
    用来控制元素与元素之间距离关系。可以根据设备的不同尺寸，定义不同的gutter值，作为栅格布局的统一规范。为了保证较好的视觉效果，通常gutter的取值不会大于margin的取值。
-2. Margins：
+2. Margin：
    离栅格容器边缘的距离。可以根据设备的不同尺寸，定义不同的margin值，作为栅格布局的统一规范。
-3. Columns:
+3. Column:
    栅格布局的主要定位工具。根据设备的不同尺寸，把栅格容器分割成不同的列数，在保证margin和gutter符合规范的情况下，根据总Column的个数计算每个Column列的宽度。
 
 
 ### 系统栅格断点
 
-系统根据不同水平宽度设备对应Columns的数量关系，形成了一套断点规则定义。
+系统根据不同水平宽度设备对应Column的数量关系，形成了一套断点规则定义。
 
-系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(columns)，边距（gutter)，间隔(gutter)定义如下：
+系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(column)，边距（margin)，间隔(gutter)定义如下：
 
 
 | 设备水平宽度断点范围              | 设备宽度类型 | 描述        | columns | gutter | margin |
@@ -48,7 +48,7 @@
 
 通过接口`GridContainer(options?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: Length, margin?: Length})`创建栅格容器，栅格容器内的所有子组件可以使用栅格布局。
 
-- 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列于列间隔为10vp, 两侧边距为20vp：
+- 可以通过参数定义栅格布局的总列数（columns)，间隔（gutter)，两侧边距（margin)。例如栅格容器总共分为6列，列与列间隔为10vp, 两侧边距为20vp：
 
   ```
   GridContainer({ columns: 6, gutter: 10, margin: 20 }) {}
@@ -60,7 +60,7 @@
   GridContainer() {}
   ```
 
-  上述例子中，默认在在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列于列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列于列的间隔为24vp，两侧边距是32vp。
+  上述例子中，默认在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列与列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列与列的间隔为24vp，两侧边距是32vp。
 
 - 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
 

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

@@ -15,11 +15,11 @@
 
 首先导入媒体查询模块，例如：
 ```
-  import mediaquery from '@ohos.mediaquery'
+import mediaquery from '@ohos.mediaquery'
 ```
 然后通过matchMediaSync接口设置媒体查询条件，并保存返回的条件监听句柄，例如：
 ```
-  listener = mediaquery.matchMediaSync('(orientation: landscape)')
+listener = mediaquery.matchMediaSync('(orientation: landscape)')
 ```
 最后通过上面保存的条件监听句柄listener去注册回调函数，在回调函数里更改页面布局或者实现业务逻辑，当匹配到媒体查询条件时会触发此回调函数，例如：
 ```
@@ -39,13 +39,13 @@ listener.on('change', onPortrait)
 ```
 例如：
 
-screen and (round-screen: true) // 当设备屏幕是圆形时条件成立
+`screen and (round-screen: true)` ：当设备屏幕是圆形时条件成立
 
-(max-height: 800) // 当高度小于800时条件成立
+`(max-height: 800)` ：当高度小于800时条件成立
 
-(height <= 800)  // 当高度小于800时条件成立
+`(height <= 800) ` ：当高度小于800时条件成立
 
-screen and (device-type: tv) or (resolution < 2) // 包含多个媒体特征的多条件复杂语句查询
+`screen and (device-type: tv) or (resolution < 2)` ：包含多个媒体特征的多条件复杂语句查询
 
 ###  媒体类型(media-type)
 

zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md

@@ -267,6 +267,6 @@
 
 针对页面布局与连接，有以下示例工程可供参考：
 
-- [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSDefiningPageLayoutAndConnection)
+- [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/DefiningPageLayoutAndConnection)
 
   本示例构建了食物分类列表页面和食物详情页，向开发者展示了List布局、Grid布局以及页面路由的基本用法。