diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md
index c3ebcff0e2a0e0a3422fea322e4df446157567b0..0e7d28d9dd84ba422ceec2f9a86579ab3fa6b0a5 100755
--- a/zh-cn/application-dev/ui/Readme-CN.md
+++ b/zh-cn/application-dev/ui/Readme-CN.md
@@ -64,7 +64,7 @@
- [弹性布局](ui-ts-layout-flex.md)
- [网格布局](ui-ts-layout-grid.md)
- 响应式布局
- - [栅格布局(老)](ui-ts-layout-grid-container.md)
+ - [栅格布局](ui-ts-layout-grid-container.md)
- [栅格布局(新)](ui-ts-layout-grid-container-new.md)
- [媒体查询](ui-ts-layout-mediaquery.md)
- 体验声明式UI
diff --git a/zh-cn/application-dev/ui/figures/gridExp1.png b/zh-cn/application-dev/ui/figures/gridExp1.png
index 07c10f63acca0124cb7ad004f0e498b7071d4b7a..6767d92cee335418b9c82aa842359dfce1d887c9 100644
Binary files a/zh-cn/application-dev/ui/figures/gridExp1.png and b/zh-cn/application-dev/ui/figures/gridExp1.png differ
diff --git a/zh-cn/application-dev/ui/figures/gridExp2.png b/zh-cn/application-dev/ui/figures/gridExp2.png
index 4fbeea1b4b69fb8b442c99f444426752e303a3bb..c484c27c079f3490b32d7e6c2c8e3f0b84a0151a 100644
Binary files a/zh-cn/application-dev/ui/figures/gridExp2.png and b/zh-cn/application-dev/ui/figures/gridExp2.png differ
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-grid.md b/zh-cn/application-dev/ui/ui-ts-layout-grid.md
index aeb01089743656157fccec9b5795e694bae4d1bf..198b9a48a0b365da4756ce87397c112c574a5b69 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-grid.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-grid.md
@@ -12,7 +12,7 @@
## 容器组件Grid设置
### 行列数量占比
通过Grid的组件的columnsTemplate和rowTemplate属性设置网格布局行列数量与尺寸占比。
-下面以columnsTemplate为例,介绍该属性的设置,该属性值是一个由多个空格和'数字+fr'间隔拼接的字符串,fr的个数即网格布局的列数,fr前面的数值大小,用于计算改列在网格布局宽度上的占比,最终决定该列的宽度。
+下面以columnsTemplate为例,介绍该属性的设置,该属性值是一个由多个空格和'数字+fr'间隔拼接的字符串,fr的个数即网格布局的列数,fr前面的数值大小,用于计算该列在网格布局宽度上的占比,最终决定该列的宽度。
```ts
Grid().columnsTemplate('1fr 1fr 1fr 1fr')
```
@@ -34,7 +34,7 @@ Grid().columnsTemplate('4fr 2fr 3fr')
### 排列方式
通过layoutDirection可以设置网格布局的主轴方向,决定子组件的排列方式。
-可选值包括Row,RowReverse, Column, ColumnReverse四种情况。
+可选值包括Row,RowReverse, Column, ColumnReverse四种情况。
效果如下:

@@ -48,7 +48,8 @@ Grid()
.rowsGap(20)
```

-上图中,设置网格布局子组件间,垂直间距为20,水平间距为10。
+
+上图中,设置网格布局子组件间的垂直间距为20,水平间距为10。
## 网格子组件GridItem设置
@@ -56,7 +57,7 @@ Grid()
### 设置子组件占的行列数
网格布局的行列标号从1开始,依次编号。
-子组件横跨多行时,通过rowStart设置子组件起始行编号,rowEnd设置终点行编号。当rowStart值与rowEnd值相同时,子元素与默认一样只占一行。关键如下:
+子组件横跨多行时,通过rowStart设置子组件起始行编号,rowEnd设置终点行编号。当rowStart值与rowEnd值相同时,子元素只占一个网格。示例如下:
```ts
Grid() {
GridItem() {
@@ -64,7 +65,7 @@ Grid() {
.fontSize(16)
.textAlign(TextAlign.Center)
.textStyle()
- .rowStart(2).rowEnd(3) // 5子元素从第二列到第三列
+ }.rowStart(2).rowEnd(3) // 5子元素从第二列到第三列
GridItem() {
Text('4')
@@ -103,7 +104,6 @@ Grid() {
## 场景示例
使用grid布局实现一个计算器的排布效果,代码如下:
```ts
-// xxx.ets
@Entry
@Component
struct GridExample {
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-linear.md b/zh-cn/application-dev/ui/ui-ts-layout-linear.md
index da4a16bc72b715594a1cbe2488274dff84feaa02..32b10b3b4f2ee5d301389e804e924496fbd32fe3 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-linear.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-linear.md
@@ -1,21 +1,23 @@
# 线性布局
-线性布局(LinearLayout)是开发中最常用的布局。正如它的名字所描述的一样,这个布局会将它所包含的组件在线性方向上(水平方向和垂直方向)依次排列。
+线性布局(LinearLayout)是开发中最常用的布局。正如其名,线性布局的子组件在线性方向上(水平方向和垂直方向)依次排列。
通过线性容器[Row](../reference/arkui-ts/ts-container-row.md)和[Column](../reference/arkui-ts/ts-container-column.md)实现线性布局。Column容器内子组件按照垂直方向排列,Row组件中,子组件按照水平方向排列。
## 线性布局的排列
-线性布局的排列方向由容器组件决定。根据不同的排列方向,选择使用Row或Column容器创建线性布局,包含space,alignItems,justifyContent三个属性的使用:
-1. 通过线性容器的space参数设置主轴(排列方向)上子组件的间距。达到各子组件在排列方向上的等间距效果。
+线性布局的排列方向由所选容器组件决定。根据不同的排列方向,选择使用Row或Column容器创建线性布局,通过调整space,alignItems,justifyContent属性调整子组件的间距,水平垂直方向的对齐方式。
+1. 通过space参数设置主轴(排列方向)上子组件的间距。达到各子组件在排列方向上的等间距效果。
2. 通过alignItems属性设置子组件在交叉轴(排列方向的垂直方向)的对齐方式。且在各类尺寸屏幕中,表现一致。其中,交叉轴为垂直方向时,取值为[VerticalAlign类型](../reference/arkui-ts/ts-appendix-enums.md#verticalalign),水平方向取值为[HorizontalAlign类型](../reference/arkui-ts/ts-appendix-enums.md#horizontalalign)。
-3. 通过justifyContent属性设置子组件在主轴(排列方向)上的对齐方式。实现布局的自适应均分能力。取值为[FlexAlign类型](../reference/arkui-ts/ts-appendix-enums.md#flexalign)
+3. 通过justifyContent属性设置子组件在主轴(排列方向)上的对齐方式。实现布局的自适应均分能力。取值为[FlexAlign类型](../reference/arkui-ts/ts-appendix-enums.md#flexalign)。
-|属性名|描述|Row效果图|Column效果图|
-|------|---------------------------|----------------------------|---------------------------|
-|space |- 横向布局中各子组件的在水平方向的间距
- 纵向布局中个子元素垂直方向间距|  | |
-|alignItems |容器排列方向的垂直方向上,子组件与父组件的对齐方式|  | |
-|justifyContent |容器排列方向上,子组件的对齐方式 |  ||
+具体使用以及效果如下表所示:
+
+ |属性名|描述|Row效果图|Column效果图|
+ |------|---------------------------|----------------------------|---------------------------|
+ |space |- 横向布局中各子组件的在水平方向的间距
- 纵向布局中个子元素垂直方向间距|  | |
+ |alignItems |容器排列方向的垂直方向上,子组件在父容器中的对齐方式|  | |
+ |justifyContent |容器排列方向上,子组件在父容器中的对齐方式 |  ||
## 自适应拉伸
在线性布局下,常用空白填充组件[Blank](../reference/arkui-ts/ts-basic-components-blank.md),在容器主轴方向自动填充空白空间,达到自适应拉伸效果。
@@ -38,11 +40,12 @@ struct BlankExample {

+
## 自适应缩放
-自适应缩放是指在各种不同大小设备中,子组件按照预设的比例,尺寸随容器尺寸的变化而变化。在线性布局中有下列方法实现。
+自适应缩放是指在各种不同大小设备中,子组件按照预设的比例,尺寸随容器尺寸的变化而变化。在线性布局中有下列方法实现:
-- 父容器尺寸确定时,设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配,忽略元素本身尺寸设置,在任意尺寸设备下,自适应占满剩余空间。
+1. 父容器尺寸确定时,设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配,忽略元素本身尺寸设置,在任意尺寸设备下,自适应占满剩余空间。
```ts
@Entry
@Component
@@ -94,7 +97,7 @@ struct BlankExample {

-- 父容器尺寸确定时,通过设置子组件以及兄弟组件的width宽度,使用百分比单位,可以保证各自元素在任意尺寸下的自适应占比。
+2. 父容器尺寸确定时,使用百分比设置子组件以及兄弟组件的width宽度,可以保证各自元素在任意尺寸下的自适应占比。
```ts
@Entry
@Component
@@ -123,11 +126,13 @@ struct BlankExample {
```

+上例中,在任意大小的设备中,子组件的宽度占比固定。
+
## 定位能力
-- 绝对定位
+- **绝对定位**
- 线性布局中可以使用组件的positon属性实现绝对布局(AbsoluteLayout),设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备,使用绝对定位的适应性会比较差,在屏幕的适配上有缺陷。
+ 线性布局中可以使用组件的[positon属性](../reference/arkui-ts/ts-universal-attributes-location.md)实现绝对布局(AbsoluteLayout),设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备,使用绝对定位的适应性会比较差,在屏幕的适配上有缺陷。
```ts
@Entry
@Component
@@ -165,7 +170,7 @@ struct BlankExample {

- 相对定位
- 使用组件的offset属性可以实现相对定位,设置元素相对于自身的偏移量。设置该属性,不影响父容器布局,仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。
+ 使用组件的[offset属性](../reference/arkui-ts/ts-universal-attributes-location.md)可以实现相对定位,设置元素相对于自身的偏移量。设置该属性,不影响父容器布局,仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。
```ts
@Entry
@Component