add layout

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

zh-cn/application-dev/ui/Readme-CN.md

@@ -58,9 +58,15 @@
         - [Button开发指导](ui-ts-basic-components-button.md)
         - [Web开发指导](ui-ts-components-web.md)
     - 常见布局开发指导
-        - [弹性布局](ui-ts-layout-flex.md)
-        - [栅格布局](ui-ts-layout-grid-container.md)
-        - [媒体查询](ui-ts-layout-mediaquery.md)
+        - 自适应布局
+            - [线性布局](ui-ts-layout-linear.md)
+            - [层叠布局](ui-ts-layout-stack.md)
+            - [弹性布局](ui-ts-layout-flex.md)
+            - [网格布局](ui-ts-layout-grid.md)
+        - 响应式布局
+            - [栅格布局（老）](ui-ts-layout-grid-container.md)
+            - [栅格布局（新）](ui-ts-layout-grid-container-new.md)
+            - [媒体查询](ui-ts-layout-mediaquery.md)
     - 体验声明式UI
         - [创建声明式UI工程](ui-ts-creating-project.md)
         - [初识Component](ui-ts-components.md)

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

 # 弹性布局
 
-
-Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容器组件，进而对容器内的其他元素进行弹性布局，例如：使三个元素在容器内水平居中，垂直等间隔分散。
+弹性布局又称Flex布局，是自适应布局中使用最为灵活的布局。弹性布局提供一种更加有效的方式来对容器中的子元素进行排列、对齐和分配空白空间。
+开发者可以通过Flex的接口创建容器组件，进而对容器内的其他元素进行弹性布局。
 
 
 ## 创建弹性布局
-
+ 
 接口的调用形式如下：
 
 `Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap,  justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign })`
-通过参数direction定义弹性布局的布局方向，justifyContent定义弹性布局方向上的子组件对齐方式， alignContent定义与布局方向垂直的方向上的子组件对齐方式，wrap定义内容超过一行时是否换行。
+
+通过参数direction定义弹性布局的布局方向，justifyContent定义子组件在弹性布局方向上的对齐方式， alignContent定义子组件在与布局方向垂直的方向上的对齐方式，wrap定义内容超过一行时是否换行。
 
 ## 弹性布局方向
 
-弹性布局有两个方向，子组件放置的方向是主轴，与主轴垂直的方向是交叉轴。通过direction参数设置容器主轴的方向，可选值有：
+弹性布局有两个方向，子组件排列的方向是主轴，与主轴垂直的方向是交叉轴。通过direction参数设置容器主轴的方向，可选值有：
 
 - FlexDirection.Row（默认值）：主轴为水平方向，子组件从起始端沿着水平方向开始排布。
 
@@ -81,10 +82,9 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
 
 
 ## 弹性布局换行
-
 默认情况下，子组件在Flex容器中都排在一条线（又称"轴线"）上。通过wrap参数设置其他换行方式，可选值有：
 
-- FlexWrap.NoWrap : 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
+- FlexWrap.NoWrap（默认值）: 不换行。如果子元素的宽度总和大于父元素的宽度，则子元素会被压缩宽度。
 
   ```ts
   Flex({ wrap: FlexWrap.NoWrap }) {
@@ -99,7 +99,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
 
   ![zh-cn_image_0000001263139409](figures/zh-cn_image_0000001263139409.png)
 
-- FlexWrap.Wrap：换行。
+- FlexWrap.Wrap：换行，每一行子元素按照主轴方向排列。
 
   ```ts
   Flex({ wrap: FlexWrap.Wrap }) {
@@ -114,7 +114,7 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
 
   ![zh-cn_image_0000001218419614](figures/zh-cn_image_0000001218419614.png)
 
-- FlexWrap.WrapReverse：换行，且与行排列方向相反。
+- FlexWrap.WrapReverse：换行，每一行子元素按照主轴反方向排列。
 
   ```ts
   Flex({ wrap: FlexWrap.WrapReverse}) {
@@ -132,27 +132,25 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
 
 ## 弹性布局对齐方式
 
-
 ### 主轴对齐
 
 可以通过justifyContent参数设置在主轴的对齐方式，可选值有：
 
-- FlexAlign.Start: 元素在主轴方向首端对齐, 第一个元素与行首对齐，同时后续的元素与前一个对齐。
+- FlexAlign.Start（默认值）: 子元素在主轴方向首端对齐, 第一个子元素与父元素边沿对齐，其他元素与前一个元素对齐。
 
   ```ts
   Flex({ justifyContent: FlexAlign.Start }) {  
     Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)  
-    Text('2').width('20%').height(50).backgroundColor(0xD2B48C)   
-    Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
+     Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
   }
   .width('90%')
-  .padding(10)
+  .padding({ top: 10, bottom: 10 })
   .backgroundColor(0xAFEEEE)
   ```
 
-  ![zh-cn_image_0000001218259634](figures/zh-cn_image_0000001218259634.png)
+  ![zh-cn_image_0000001218259634](figures/mainStart.png)
 
-- FlexAlign.Center: 元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同。
+- FlexAlign.Center: 子元素在主轴方向居中对齐。
 
   ```ts
   Flex({ justifyContent: FlexAlign.Center }) {  
@@ -161,13 +159,13 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
     Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
   }
   .width('90%')
-  .padding(10)
+  .padding({ top: 10, bottom: 10 })
   .backgroundColor(0xAFEEEE)
   ```
 
-  ![zh-cn_image_0000001218579608](figures/zh-cn_image_0000001218579608.png)
+  ![zh-cn_image_0000001218579608](figures/mainCenter.png)
 
-- FlexAlign.End: 元素在主轴方向尾部对齐,  最后一个元素与行尾对齐，其他元素与后一个对齐。
+- FlexAlign.End: 子元素在主轴方向尾部对齐, 最后一个子元素与父元素边沿对齐，其他元素与后一个元素对齐。
 
   ```ts
   Flex({ justifyContent: FlexAlign.End }) {  
@@ -176,13 +174,13 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
     Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
   }
   .width('90%')
-  .padding(10)
+  .padding({ top: 10, bottom: 10 })
   .backgroundColor(0xAFEEEE)
   ```
 
-  ![zh-cn_image_0000001218739568](figures/zh-cn_image_0000001218739568.png)
+  ![zh-cn_image_0000001218739568](figures/mainEnd.png)
 
-- FlexAlign.SpaceBetween:  Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素与行首对齐，最后一个元素与行尾对齐。
+- FlexAlign.SpaceBetween:  Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。
 
   ```ts
   Flex({ justifyContent: FlexAlign.SpaceBetween }) {  
@@ -191,13 +189,13 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
     Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
   }
   .width('90%')
-  .padding(10)
+  .padding({ top: 10, bottom: 10 })
   .backgroundColor(0xAFEEEE)
   ```
 
-  ![zh-cn_image_0000001263019461](figures/zh-cn_image_0000001263019461.png)
+  ![zh-cn_image_0000001263019461](figures/mainSpacebetween.png)
 
-- FlexAlign.SpaceAround:  Flex主轴方向均匀分配弹性元素，相邻元素之间距离相同。 第一个元素到行首的距离和最后一个元素到行尾的距离是相邻元素之间距离的一半。
+- FlexAlign.SpaceAround:  Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。 第一个子元素到行首的距离和最后一个子元素到行尾的距离是相邻元素之间距离的一半。
 
   ```ts
   Flex({ justifyContent: FlexAlign.SpaceAround }) {  
@@ -206,13 +204,13 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
     Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
   }
   .width('90%')
-  .padding(10)
+  .padding({ top: 10, bottom: 10 })
   .backgroundColor(0xAFEEEE)
   ```
 
-  ![zh-cn_image_0000001263339461](figures/zh-cn_image_0000001263339461.png)
+  ![zh-cn_image_0000001263339461](figures/mainSpacearound.png)
 
-- FlexAlign.SpaceEvenly:  Flex主轴方向元素等间距布局， 相邻元素之间的间距、第一个元素与行首的间距、最后一个元素到行尾的间距都完全一样。
+- FlexAlign.SpaceEvenly:  Flex主轴方向元素等间距布局，相邻子元素之间的间距、第一个子元素与行首的间距、最后一个子元素到行尾的间距均相等。
 
   ```ts
   Flex({ justifyContent: FlexAlign.SpaceEvenly }) {  
@@ -221,16 +219,16 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
     Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
   }
   .width('90%')
-  .padding(10)
+  .padding({ top: 10, bottom: 10 })
   .backgroundColor(0xAFEEEE)
   ```
 
-  ![zh-cn_image_0000001263139411](figures/zh-cn_image_0000001263139411.png)
+  ![zh-cn_image_0000001263139411](figures/mainSpaceevenly.png)
 
 
 ### 交叉轴对齐
-
-可以通过alignItems参数设置在交叉轴的对齐方式，可选值有：
+#### 容器组件设置交叉轴对齐
+可以通过flex组件的alignItems参数设置子元素在交叉轴的对齐方式，可选值有：
 
 - ItemAlign.Auto: 使用Flex容器中默认配置。
 
@@ -323,29 +321,224 @@ Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容
   ![zh-cn_image_0000001263019463](figures/zh-cn_image_0000001263019463.png)
 
 
+#### 子组件设置交叉轴对齐
+
+子组件的alignSelf属性也可以设置子组件在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems默认配置。如下例所示：
+
+```ts
+Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
+  Text('alignSelf Start').width('25%').height(80)
+    .alignSelf(ItemAlign.Start)
+    .backgroundColor(0xF5DEB3)
+  Text('alignSelf Baseline')
+    .alignSelf(ItemAlign.Baseline)
+    .width('25%')
+    .height(80)
+    .backgroundColor(0xD2B48C)
+  Text('alignSelf Baseline').width('25%').height(100)
+    .backgroundColor(0xF5DEB3)
+    .alignSelf(ItemAlign.Baseline)
+  Text('no alignSelf').width('25%').height(100)
+    .backgroundColor(0xD2B48C)
+  Text('no alignSelf').width('25%').height(100)
+    .backgroundColor(0xF5DEB3)
+
+}.width('90%').height(220).backgroundColor(0xAFEEEE)
+```
+
+![](figures/alignself.png)
+
+上例中，Flex容器中alignItems设置交叉轴子组件的对齐方式为居中，子组件自身设置了alignSelf属性的情况，覆盖父组件的alignItem值，表现为alignSelf的定义。
+
 ### 内容对齐
 
-可以通过alignContent参数设置在换行组件的行在交叉轴剩余空间内的对齐方式，可选值有：
+可以通过alignContent参数设置子元素各行在交叉轴剩余空间内的对齐方式，只在多行的flex布局中生效，可选值有：
+
+- FlexAlign.Start: 子元素各行与交叉轴起点对齐。
+
+  ``` 
+  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) {
+    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
+    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
+    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
+    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
+    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
+  }
+  .width('90%')
+  .height(100)
+  .backgroundColor(0xAFEEEE)          
+  ```
+  
+  ![crossStart.png](figures/crossStart.png)
+
+- FlexAlign.Center: 子元素各行在交叉轴方向居中对齐。
+
+  ```ts
+  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Center }) {
+    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
+    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
+    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
+    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
+    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
+  }
+  .width('90%')
+  .height(100)
+  .backgroundColor(0xAFEEEE)          
+  ```
+  ![crossCenter.png](figures/crossCenter.png)
+- FlexAlign.End: 子元素各行与交叉轴终点对齐。
+
+  ```ts
+  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.End }) {
+    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
+    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
+    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
+    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
+    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
+  }
+  .width('90%')
+  .height(100)
+  .backgroundColor(0xAFEEEE)          
+  ```
+  ![crossEnd.png](figures/crossEnd.png)
+- FlexAlign.SpaceBetween: 子元素各行与交叉轴两端对齐，各行间垂直间距平均分布。
+
+  ```ts
+  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceBetween }) {
+    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
+    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
+    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
+    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
+    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
+  }
+  .width('90%')
+  .height(100)
+  .backgroundColor(0xAFEEEE)          
+  ```
+  ![crossSpacebetween.png](figures/crossSpacebetween.png)
+
+- FlexAlign.SpaceAround: 子元素各行间距相等，是元素首尾行与交叉轴两端距离的两倍。
+
+  ```ts
+  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
+    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
+    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
+    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
+    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
+    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
+  }
+  .width('90%')
+  .height(100)
+  .backgroundColor(0xAFEEEE)          
+  ```
+  
+  ![crossSpacearound.png](figures/crossSpacearound.png)
+
+- FlexAlign.SpaceEvenly:  子元素各行间距，子元素首尾行与交叉轴两端距离都相等。
 
-- FlexAlign.Start: 左对齐。
+  ```ts
+  Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
+    Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
+    Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
+    Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
+    Text('4').width('30%').height(20).backgroundColor(0xF5DEB3)
+    Text('5').width('20%').height(20).backgroundColor(0xD2B48C)
+  }
+  .width('90%')
+  .height(100)
+  .backgroundColor(0xAFEEEE)          
+  ```
+  
+  ![crossSpaceevenly.png](figures/crossSpaceevenly.png)
 
-- FlexAlign.Center: 居中对齐。
 
-- FlexAlign.End: 右对齐。
+## 弹性布局的自适应拉伸
+在弹性布局父组件尺寸不够大的时候，通过子组件的下面几个属性设置其再父容器的占比，达到自适应布局能力。
+1. flexBasis: 设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置或者为auto，那子项的空间为width/height的值。
+```ts
+Flex() {
+  Text('flexBasis("auto")')
+    .flexBasis('auto') // 未设置width以及flexBasis值为auto，内容自身宽松
+    .height(100)
+    .backgroundColor(0xF5DEB3)
+  Text('flexBasis("auto")'+' width("40%")')
+    .width('40%')
+    .flexBasis('auto') //设置width以及flexBasis值auto，使用width的值
+    .height(100)
+    .backgroundColor(0xD2B48C)
+
+
+  Text('flexBasis(100)')  // 未设置width以及flexBasis值为100，宽度为100vp
+    .flexBasis(100)  
+    .height(100)
+    .backgroundColor(0xF5DEB3)
+
+  Text('flexBasis(100)')
+    .flexBasis(100)
+    .width(200) // flexBasis值为100，覆盖width的设置值，宽度为100vp
+    .height(100)
+    .backgroundColor(0xD2B48C)
+}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
+```
+![](figures/flexbasis.png)
 
-- FlexAlign.SpaceBetween:  flex items之间的距离相等，与main start、main end两端对齐。
+2. flexGrow: 设置父容器的剩余空间分配给此属性所在组件的比例。用于"瓜分"父组件的剩余空间。
+```ts
+Flex() {
+  Text('flexGrow(1)')
+    .flexGrow(2) 
+    .width(100)
+    .height(100)
+    .backgroundColor(0xF5DEB3)
+  
+  Text('flexGrow(3)')
+    .flexGrow(2)
+    .width(100)
+    .height(100)
+    .backgroundColor(0xD2B48C)
+
+  Text('no flexGrow')
+    .width(100) 
+    .height(100)
+    .backgroundColor(0xF5DEB3)
+}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
+```
 
-- FlexAlign.SpaceAround:  flex items之间的距离相等，flex items与main start、main end之间的距离等于flex items之间距离的一半。
+![](figures/flexgrow.png)
 
-- FlexAlign.SpaceEvenly:  flex items之间的距离相等，flex items与main start、main end之间的距离等于flex items之间的距离。
+上图中，父容器宽度400vp,三个子元素原始宽度为100vp，综合300vp，剩余空间100vp根据flexGrow值的占比分配给子元素，未设置flexGrow的子元素不参与“瓜分”。
+第一个元素以及第二个元素以2:3分配剩下的100vp。第一个元素为100vp+100vp*2/5=140vp，第二个元素为100vp+100vp*3/5=160vp。
+
+3. flexShrink: 当父容器空间不足时，子元素的压缩比例。
+```ts
+Flex({ direction: FlexDirection.Row }) {
+  Text('flexShrink(3)')
+    .flexShrink(3)
+    .width(200)
+    .height(100)
+    .backgroundColor(0xF5DEB3)
+  
+  Text('no flexShrink')
+    .width(200)
+    .height(100)
+    .backgroundColor(0xD2B48C)
+
+  Text('flexShrink(2)')
+    .flexShrink(2)
+    .width(200)
+    .height(100)
+    .backgroundColor(0xF5DEB3)  
+}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE) 
+```
+![](figures/flexshrink.png)
 
 
 ## 场景示例
 
-  可使用弹性布局做出子元素排列方式为水平方向排列，且子元素的总宽度超出父元素的宽度不换行，子元素在水平方向两端对齐，中间间距由除首尾外的子元素平分，竖直方向上子元素居中的效果。
+使用弹性布局，可以实现子元素沿水平方向排列，两端对齐，子元素间距平分，竖直方向上子元素居中的效果。示例如下：
 
 ```ts
-@Entry
+@Entry  
 @Component
 struct FlexExample {
   build() {
@@ -358,7 +551,6 @@ struct FlexExample {
         }
         .height(70)
         .width('90%')
-        .padding(10)
         .backgroundColor(0xAFEEEE)
       }.width('100%').margin({ top: 5 })
     }.width('100%') 
@@ -367,7 +559,7 @@ struct FlexExample {
 ```
 
 
-![zh-cn_image_0000001261605867](figures/zh-cn_image_0000001261605867.png)
+![zh-cn_image_0000001261605867](figures/flexExample.png)
 
 
 ## 相关实例

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提供了更灵活、更全面的栅格系统实现方案。其中GridRow为栅格容器组件，仅可以和栅格子组件(GridCol)在栅格布局场景中使用。GridCol作为栅格子组件使用。
+
+
+
+## 栅格容器GridRow
+栅格布局的栅格特性由GridRow组件的columns、gutter、direction、breakpoints四个关键特性决定。
+### 栅格布局的总列数
+栅格布局的主要定位工具，设置栅格布局的总列数。
+
+- 当类型为number时，栅格布局在任何尺寸设备下都被分为columns列。当未设置columns时，使用系统默认的值，将栅格布局分成12列。
+  ```ts
+  GridRow({}) {
+    ForEach(this.bgColors, (color, index) => {
+      GridCol() {
+        Row() {
+          Text("" + index)
+        }.width("100%").height("50vp")                 
+      }
+      .backgroundColor(color)
+      .span(2)  
+    })
+  }           
+  ```
+  ![](figures/columns1.png)
+  
+  如上所示，栅格系统默认分成12列，每一个子元素占2列，前6个子元素在第一排。
+
+- 当类型为GridRowColumnOption时，支持六种不同尺寸（xs,sm,md,lg,xl,xxl）设备的总列数设置，各个尺寸下数值可不同。
+  ```ts
+  columns: {sm: 8, md: 10} 
+  ```
+  如上，若只设置sm,md的栅格总列数，则较小的尺寸使用默认columns值12，较大的尺寸使用前一个尺寸的columns。这里详单与设置了，xs:12,sm:8,md:10,lg:10,xl:10,xxl:10。
+
+### 栅格子元素间距
+通过GridRow的gutter属性设置元素之间的距离，决定了内容间的紧密程度。
+
+- 当类型为number时，同时设置栅格子元素间的水平垂直边距且相等。
+  ```ts
+  GridRow({ gutter: 10 }){}
+  ```
+  ![](figures/gutter1.png)
+  
+  上例中，子元素水平与垂直方向距离相邻元素的间距为10。
+
+- 当类型为GutterOption时，单独设置栅格子元素水平垂直边距，x属性为水平方向间距，y为垂直方向间距。
+  ```ts
+  GridRow({ gutter: { x: 20, y: 50 } }){}
+  ```
+  ![](figures/gutter2.png)  
+
+
+### 排布方向
+通过GridRow的direction属性设置栅格子元素在栅格容器中的排列方向。
+
+- 子元素默认从左往右排列。
+  ```ts
+  GridRow({ direction: GridRowDirection.Row }){}
+  ```
+  
+  ![](figures/direction1.png)
+
+- 子元素从右往左排列。
+  ```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组件的子组件使用。涉及span，offset，order三个概念。
+
+通过给GridCol传参或者设置属性两种方式设置span，offset，order的值。
+
+- span的设置
+  ```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的设置
+  ```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的设置
+  ```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时，子元素在所有尺寸设备下占用的列数相同。
+  ```ts
+  GridRow({ columns: 8 }) {
+    ForEach(this.bgColors, (color, index) => {
+      GridCol({ span: 2 }) {      
+        Row() {
+          Text("" + index)
+        }.width("100%").height("50vp")          
+      }
+      .backgroundColor(color)
+    })
+  }                
+  ``` 
+
+  ![](figures/span1.png)
+
+- 当类型为GridColColumnOption时，支持六种不同尺寸（xs，sm,md,lg,xl,xxl）设备中子元素所占列数设置,各个尺寸下数值可不同。
+  ```ts
+  GridRow({ columns: 8 }) {
+    ForEach(this.bgColors, (color, index) => {
+      GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {      
+        Row() {
+          Text("" + index)
+        }.width("100%").height("50vp")          
+      }
+      .backgroundColor(color)
+    })
+  }                
+  ```
+  ![](figures/span2.gif)
+
+
+### offset
+栅格子元素相对于前一个子元素的偏移列数，默认为0。
+- 当类型为number时，子元素偏移相同列数。
+  ```ts
+  GridRow() {
+    ForEach(this.bgColors, (color, index) => {
+      GridCol({ offset: 2 }) {      
+        Row() {
+          Text("" + index)
+        }.width("100%").height("50vp")          
+      }
+      .backgroundColor(color)
+    })
+  }                
+  ``` 
+
+  ![](figures/offset1.png)
+  栅格默认分成12列，每一个子元素默认占1列，偏移2列，每个子元素及间距共占3列，一行放四个子元素。
+
+- 当类型为GridColColumnOption时，支持六种不同尺寸（xs，sm,md,lg,xl,xxl）设备中子元素所占列数设置,各个尺寸下数值可不同。
+  ```ts
+  GridRow() {
+    ForEach(this.bgColors, (color, index) => {
+      GridCol({ offset: { xs: 1, sm: 2, md: 3, lg: 4 } }) {      
+        Row() {
+          Text("" + index)
+        }.width("100%").height("50vp")          
+      }
+      .backgroundColor(color)
+    })
+  }                
+  ```
+  ![](figures/offset2.gif)
+
+### order
+  栅格子组件的序号，决定子组件排列次序。当子组件不设置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)
+}            
+```
+  ![](figures/order1.png)
+- 当类型为GridColColumnOption时，支持六种不同尺寸（xs，sm,md,lg,xl,xxl）设备中子元素排序次序设置。
+
+  ![](figures/order2.gif)
+
+
+
+## 场景示例

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

@@ -3,34 +3,33 @@
 
 栅格系统作为一种辅助布局的定位工具，在平面设计和网站设计都起到了很好的作用，对移动设备的界面设计有较好的借鉴作用。总结栅格系统对于移动设备的优势主要有：
 
-
 1. 给布局提供一种可循的规律，解决多尺寸多设备的动态布局问题。
 2. 给系统提供一种统一的定位标注，保证各模块各设备的布局一致性。
 3. 给应用提供一种灵活的间距调整方法，满足特殊场景布局调整的可能性。
 
-为实现栅格布局效果，声明式范式提供了[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)栅格容器组件，配合其子组件的通用属性useSizeType来实现栅格布局。
+为实现栅格布局效果，声明式范式提供了[GridContainer](../reference/arkui-ts/ts-container-gridcontainer.md)栅格容器组件，配合其子组件的通用属性[useSizeType](../reference/arkui-ts/ts-container-grid.md)来实现栅格布局。
 
 ## 栅格系统
 
 栅格系统有Column、Margin、Gutter三个概念。
 
 
-![zh-cn_image_0000001217236574](figures/zh-cn_image_0000001217236574.png)
+![zh-cn_image_0000001224173302](figures/zh-cn_image_0000001224173302.png)
 
 
 1. Gutter：
-   用来控制元素与元素之间距离关系。可以根据设备的不同尺寸，定义不同的gutter值，作为栅格布局的统一规范。为了保证较好的视觉效果，通常gutter的取值不会大于margin的取值。
+   元素之间的距离，决定了内容间的紧密程度。作为栅格布局的统一规范。为了保证较好的视觉效果，通常gutter的取值不会大于margin的取值。
 2. Margin：
-   离栅格容器边缘的距离。可以根据设备的不同尺寸，定义不同的margin值，作为栅格布局的统一规范。
+   内容距栅格容器边缘的距离，决定了内容可展示的总宽度。作为栅格布局的统一规范。
 3. Column:
    栅格布局的主要定位工具。根据设备的不同尺寸，把栅格容器分割成不同的列数，在保证margin和gutter符合规范的情况下，根据总Column的个数计算每个Column列的宽度。
 
 
 ### 系统栅格断点
 
-系统根据不同水平宽度设备对应Column的数量关系，形成了一套断点规则定义。
+栅格系统以设备的水平宽度（屏幕密度像素值，vp)作为断点依据，定义设备的宽度类型，设置栅格总列数，间隔，边距，形成了一套断点规则。
 
-系统以设备的水平宽度的屏幕密度像素值作为断点依据，根据当前设备水平宽度所在的断点范围，定义了设备的宽度类型。系统的栅格断点范围、设备宽度类型及其描述，以及对应的默认总列数(column)，边距（margin)，间隔(gutter)定义如下：
+不同设备水平宽度下，栅格系统默认总列数(columns)，边距（margin)，间隔(gutter)定义如下：
 
 
 | 设备水平宽度断点范围              | 设备宽度类型 | 描述        | columns | gutter | margin |
@@ -40,9 +39,17 @@
 | 600vp<=水平宽度<840vp | MD     | 中等宽度类型设备。 | 8       | 24vp   | 32vp   |
 | 840<=水平分辨率           | LG     | 大宽度类型设备。  | 12      | 24vp   | 48vp   |
 
-## 如何使用
 
-首先创建栅格容器组件，定义栅格布局，然后给栅格容器内的组件设置不同设备宽度类型下的占用列数。
+> **说明：**
+> 
+> ArkUI在API9对栅格组件做了重构，推出新的栅格组件[GridRow](../reference/arkui-ts/ts-container-gridrow.md)和[GridCol](../reference/arkui-ts/ts-container-gridcol.md)，API9推荐使用新的栅格组件，参考[新栅格组件用法](ui-ts-layout-grid-container-new.md)
+>
+
+
+
+## GridContainer栅格组件使用
+
+首先使用栅格容器组件创建栅格布局。
 
 ### 创建栅格容器
 
@@ -60,6 +67,10 @@
   GridContainer() {}
   ```
 
+    ```ts
+    GridContainer({ sizeType: SizeType.Auto })
+    ```
+
   上述例子中，默认在小宽度类型设备(SizeType.SM)上，栅格容器被分为4列，列与列的间隔为24vp, 两侧边距是24vp。在中等宽度类型设备(SizeType.MD)上，栅格容器被分为8列，列与列的间隔为24vp，两侧边距是32vp。
 
 - 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
@@ -78,7 +89,7 @@
     }
   ```
 
-  上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType.SM类型的栅格设置即占用3列，放置在第1列。
+  上述例子中，不管在任何宽度类型的设备上， Text组件都使用SizeType.SM类型的栅格设置,即占用3列，放置在第1列。
 
 ### 栅格容器内子组件的栅格设置
 
@@ -103,7 +114,7 @@ GridContainer() {
 
 ## 场景示例
 
-使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。  
+使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，不必写大量的代码兼容不同宽度类型的设备。  
 
 ```ts
 @Entry

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

+# 网格布局
+
+网格布局（GridLayout）是自适应布局中一种重要的布局，具备较强的布局均分能力，子元素占比控制能力。
+通过容器组件[Grid](../reference/arkui-ts/ts-container-grid.md)组件和子组件[GridItem](../reference/arkui-ts/ts-container-griditem.md)实现，总结优势如下：
+
+1. 容器组件尺寸发生变化时，所有子组件以及间距等比例调整，实现布局的自适应能力。
+2. 支持自定义网格布局行数和列数，以及每行每列尺寸占比。
+3. 支持设置网格布局中子组件的行列间距。
+4. 支持设置子组件横跨几行或者几列。
+ 
+网格布局中Grid组件作为容器组件，用于设置网格布局相关参数。GridItem作为Grid的子组件使用，定义子组件相关特征。
+## 容器组件Grid设置
+### 行列数量占比
+通过Grid的组件的columnsTemplate和rowTemplate属性设置网格布局行列数量与尺寸占比。
+下面以columnsTemplate为例，介绍该属性的设置，该属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，fr的个数即网格布局的列数，fr前面的数值大小，用于计算改列在网格布局宽度上的占比，最终决定该列的宽度。
+```ts
+Grid().columnsTemplate('1fr 1fr 1fr 1fr')
+```
+定义了四个等分的列，每列宽度相等。
+```ts
+Grid().columnsTemplate('1fr 2fr 3fr 4fr')
+```
+定义了四列，每列宽度比值为1:2:3:4。
+```ts
+Grid().columnsTemplate('4fr 2fr 3fr')
+```
+定义了三列，每列宽度比值为4:2:3。
+
+效果如下：
+
+![](figures/columnTemplate.png)
+
+
+
+### 排列方式
+通过layoutDirection可以设置网格布局的主轴方向，决定子组件的排列方式。
+可选值包括Row，RowReverse, Column， ColumnReverse四种情况。
+效果如下：
+
+![](figures/gridlayout.png)
+
+### 行列间距
+columnsGap用于设置网格子元素GridItem垂直方向的间距，rowsGap用于设置GridItem水平方向的间距。
+```ts
+Grid()
+.columnsTemplate('1fr 1fr 1fr 1fr')
+.columnsGap(10)
+.rowsGap(20)
+```
+![](figures/columnGap.png)
+上图中，设置网格布局子组件间，垂直间距为20，水平间距为10。
+
+
+## 网格子组件GridItem设置
+
+### 设置子组件占的行列数
+网格布局的行列标号从1开始，依次编号。
+
+子组件横跨多行时，通过rowStart设置子组件起始行编号，rowEnd设置终点行编号。当rowStart值与rowEnd值相同时，子元素与默认一样只占一行。关键如下：
+```ts
+Grid() {
+    GridItem() {
+      Text('5')
+        .fontSize(16)
+        .textAlign(TextAlign.Center)
+        .textStyle()
+    .rowStart(2).rowEnd(3)  // 5子元素从第二列到第三列
+
+    GridItem() {
+      Text('4')
+        .fontSize(16)
+        .textAlign(TextAlign.Center)
+        .textStyle()
+    }.columnStart(4).columnEnd(5) // 4从第四列到第五列
+  
+    GridItem() {
+      Text('6')
+        .fontSize(16)
+        .textAlign(TextAlign.Center)
+        .textStyle()
+    }.columnStart(2).columnEnd(4)  // 6从第二列到第四列
+
+    GridItem() {
+      Text('9')
+        .fontSize(16)
+        .textAlign(TextAlign.Center)
+        .textStyle()
+    }.columnStart(3).columnEnd(4)    // 从第三列到第四列
+}
+.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
+.rowsTemplate('1fr 1fr 1fr')
+.columnsGap(10)
+.rowsGap(20)
+.width('90%')
+.backgroundColor(0xF0F0F0)
+.height('200vp')
+.layoutDirection(GridDirection.Column)
+```
+![](figures/griditem.png)
+
+
+
+## 场景示例
+使用grid布局实现一个计算器的排布效果，代码如下：
+```ts
+// xxx.ets
+@Entry
+@Component
+struct GridExample {
+  @State Number: Array<string> = ['1', '2', '3', '+', '4', '5', '6', '-', '7', '8', '9', '*', '0', '.', '/']
+
+  @Styles textStyle(){
+    .backgroundColor(0xd0d0d0)
+    .width('100%')
+    .height('100%')
+    .borderRadius(5)
+  }
+
+  build() {
+    Column({ space: 5 }) {
+      Grid() {
+        GridItem() {
+          Text('0')
+            .fontSize(30)
+            .textStyle()
+        }.columnStart(1).columnEnd(4)
+
+        GridItem() {
+          Text('清空')
+            .fontSize(16)
+            .textAlign(TextAlign.Center)
+            .textStyle()
+        }.columnStart(1).columnEnd(2)
+
+        GridItem() {
+          Text('回退')
+            .fontSize(16)
+            .textAlign(TextAlign.Center)
+            .textStyle()
+        }.columnStart(3).columnEnd(4)
+
+        ForEach(this.Number, (day: string) => {
+          if (day === '0') {
+            GridItem() {
+              Text(day)
+                .fontSize(16)
+                .textAlign(TextAlign.Center)
+                .textStyle()
+            }.columnStart(1).columnEnd(2)
+          } else {
+            GridItem() {
+              Text(day)
+                .fontSize(16)
+                .textAlign(TextAlign.Center)
+                .textStyle()
+            }
+          }
+        })
+      }
+      .columnsTemplate('1fr 1fr 1fr 1fr')
+      .rowsTemplate('2fr 1fr 1fr 1fr 1fr 1fr')
+      .columnsGap(10)
+      .rowsGap(15)
+      .width('90%')
+      .backgroundColor(0xF0F0F0)
+      .height('70%')
+    }.width('100%').margin({ top: 5 })
+  }
+}
+```
+在大屏设备上展示效果如下：
+
+![](figures/gridExp1.png)
+
+在小屏设备下展示效果如下：
+
+![](figures/gridExp2.png)
\ No newline at end of file

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

+# 线性布局
+
+线性布局(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参数设置主轴（排列方向）上子组件的间距。达到各子组件在排列方向上的等间距效果。
+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)
+
+|属性名|描述|Row效果图|Column效果图|
+|------|---------------------------|----------------------------|---------------------------|
+|space |- 横向布局中各子组件的在水平方向的间距<br> - 纵向布局中个子元素垂直方向间距|   ![](figures/rowspace.png)      |   ![](figures/columnspace.png)|
+|alignItems |容器排列方向的垂直方向上，子组件与父组件的对齐方式|   ![](figures/rowalign.png)            |![](figures/columnalign.png) |
+|justifyContent |容器排列方向上，子组件的对齐方式 |   ![](figures/rowjustify.png)            |![](figures/columnjustify.png)|
+
+## 自适应拉伸
+在线性布局下，常用空白填充组件[Blank](../reference/arkui-ts/ts-basic-components-blank.md)，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。
+
+```ts
+@Entry
+@Component
+struct BlankExample {
+  build() {
+    Column() {
+      Row() {
+        Text('Bluetooth').fontSize(18)
+        Blank()
+        Toggle({ type: ToggleType.Switch, isOn: true })
+      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')
+    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
+  }
+}
+```
+
+![](figures/blank.gif)
+
+## 自适应缩放
+
+自适应缩放是指在各种不同大小设备中，子组件按照预设的比例，尺寸随容器尺寸的变化而变化。在线性布局中有下列方法实现。
+
+- 父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，在任意尺寸设备下，自适应占满剩余空间。
+    ```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%')
+    
+    
+        }
+      }
+    }
+    ```
+  ![](figures/layoutWeight.gif)
+
+
+- 父容器尺寸确定时，通过设置子组件以及兄弟组件的width宽度，使用百分比单位，可以保证各自元素在任意尺寸下的自适应占比。
+  ```ts
+  @Entry
+  @Component
+  struct WidthExample {
+    build() {
+      Column() {
+        Row() {
+          Column() {
+            Text('left width 20%')
+              .textAlign(TextAlign.Center)
+          }.width('20%').backgroundColor(0xffd306).height('100%')
+  
+          Column() {
+            Text('center width 50%')
+              .textAlign(TextAlign.Center)
+          }.width('50%').backgroundColor(0xffed97).height('100%')
+  
+          Column() {
+            Text('right width 30%')
+              .textAlign(TextAlign.Center)
+          }.width('30%').backgroundColor(0xffd306).height('100%')
+        }.backgroundColor(0xffd306).height('30%')
+      }
+    }
+  }
+  ```
+  ![](figures/width.gif)
+
+
+## 定位能力
+- 绝对定位
+
+  线性布局中可以使用组件的positon属性实现绝对布局（AbsoluteLayout），设置元素左上角相对于父容器左上角偏移位置。对于不同尺寸的设备，使用绝对定位的适应性会比较差，在屏幕的适配上有缺陷。
+  ```ts
+  @Entry
+  @Component
+  struct PositionExample {
+    @Styles eleStyle(){
+      .backgroundColor(0xbbb2cb)
+      .border({ width: 1 })
+      .size({ width: 120, height: 50 })
+    }
+  
+    build() {
+      Column({ space: 20 }) {
+        // 设置子组件左上角相对于父组件左上角的偏移位置
+        Row() {
+          Text('position(30, 10)')
+            .eleStyle()
+            .fontSize(16)
+            .position({ x: 10, y: 10 })
+  
+          Text('position(50%, 70%)')
+            .eleStyle()
+            .fontSize(16)
+            .position({ x: '50%', y: '70%' })
+  
+          Text('position(10%, 90%)')
+            .eleStyle()
+            .fontSize(16)
+            .position({ x: '10%', y: '80%' })
+        }.width('90%').height('100%').border({ width: 1, style: BorderStyle.Dashed })
+      }
+      .width('90%').margin(25)
+    }
+  }
+  ```
+  ![](figures/position.gif)
+- 相对定位
+
+  使用组件的offset属性可以实现相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。使用线性布局和offset可以实现大部分布局的开发。
+  ```ts
+  @Entry
+  @Component
+  struct OffsetExample {
+    @Styles eleStyle() {
+      .size({ width: 120, height: '50' })
+      .backgroundColor(0xbbb2cb)
+      .border({ width: 1 })
+    }
+  
+    build() {
+      Column({ space: 20 }) {
+        Row() {
+          Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+          Text('2  offset(15, 30)')
+            .eleStyle()
+            .fontSize(16)
+            .align(Alignment.Start)
+            .offset({ x: 15, y: 30 })
+          Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16)
+          Text('4 offset(-10%, 20%)')
+            .eleStyle()
+            .fontSize(16)
+            .offset({ x: '-5%', y: '20%' })
+        }.width('90%').height(150).border({ width: 1, style: BorderStyle.Dashed })
+      }
+      .width('100%')
+      .margin({ top: 25 })
+    }
+  } 
+  ```
+  ![](figures/offset.gif)
+
+
+## 自适应延伸
+自适应延伸，顾名思义，在不同尺寸设备下，显示内容个数不一，并延伸到屏幕外，通过滚动条拖动展示。适用于线性布局中内容一屏无法展示情景。常见下面两类实现方法。
+- List组件
+  List子项过多一屏放不下时，未展示的子项通过滚动条拖动显示。通过scrollBar属性设置滚动条的常驻状态，edgeEffect属性设置拖动到极限的回弹效果。
+  ```ts
+  @Entry
+  @Component
+  struct ListExample1 {
+    @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
+    @State alignListItem: ListItemAlign = ListItemAlign.Start
+  
+    build() {
+      Column() {
+        List({ space: 20, initialIndex: 0 }) {
+          ForEach(this.arr, (item) => {
+            ListItem() {
+              Text('' + item)
+                .width('100%')
+                .height(100)
+                .fontSize(16)
+                .textAlign(TextAlign.Center)
+                .borderRadius(10)
+                .backgroundColor(0xFFFFFF)
+            }
+            .border({ width: 2, color: Color.Green })
+          }, item => item)
+        }
+        .border({ width: 2, color: Color.Red, style: BorderStyle.Dashed })
+        .scrollBar(BarState.On) // 滚动条常驻
+        .edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果
+  
+      }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
+    }
+  }
+  ```
+  ![](figures/listcolumn.gif)
+  ```ts
+  @Entry
+  @Component
+  struct ListExample2 {
+    @State arr: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"]
+    @State alignListItem: ListItemAlign = ListItemAlign.Start
+  
+    build() {
+      Column() {
+        List({ space: 20, initialIndex: 0 }) {
+          ForEach(this.arr, (item) => {
+            ListItem() {
+              Text('' + item)
+                .height('100%')
+                .width(100)
+                .fontSize(16)
+                .textAlign(TextAlign.Center)
+                .borderRadius(10)
+                .backgroundColor(0xFFFFFF)
+            }
+            .border({ width: 2, color: Color.Green })
+          }, item => item)
+        }
+        .border({ width: 2, color: Color.Red, style: BorderStyle.Dashed })
+        .scrollBar(BarState.On) // 滚动条常驻
+        .edgeEffect(EdgeEffect.Spring) // 滚动到边缘再拖动回弹效果
+        .listDirection(Axis.Horizontal)  // 列表水平排列
+      }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding(20)
+    }
+  } 
+  ```
+  ![](figures/listrow.gif)
+
+- Scroll组件
+
+  线性布局中，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动，再内容外层包裹一个可滚动的容器组件Scroll，
+  ```ts
+  @Entry
+  @Component
+  struct ScrollExample {
+    scroller: Scroller = new Scroller();
+    private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  
+    build() {
+      Scroll(this.scroller) {
+        Column() {
+          ForEach(this.arr, (item) => {
+            Text(item.toString())
+              .width('90%')
+              .height(150)
+              .backgroundColor(0xFFFFFF)
+              .borderRadius(15)
+              .fontSize(16)
+              .textAlign(TextAlign.Center)
+              .margin({ top: 10 })
+          }, item => item)
+        }.width('100%')
+      }
+      .backgroundColor(0xDCDCDC)
+      .scrollable(ScrollDirection.Vertical) // 滚动方向纵向
+      .scrollBar(BarState.On) // 滚动条常驻显示
+      .scrollBarColor(Color.Gray) // 滚动条颜色
+      .scrollBarWidth(30) // 滚动条宽度
+      .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
+    }
+  }
+  ```
+  ![](figures/scrollrow.gif)
+  ```ts
+  @Entry
+  @Component
+  struct ScrollExample {
+    scroller: Scroller = new Scroller();
+    private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  
+    build() {
+      Scroll(this.scroller) {
+        Row() {
+          ForEach(this.arr, (item) => {
+            Text(item.toString())
+              .height('90%')
+              .width(150)
+              .backgroundColor(0xFFFFFF)
+              .borderRadius(15)
+              .fontSize(16)
+              .textAlign(TextAlign.Center)
+              .margin({ left: 10 })
+          }, item => item)
+        }.height('100%')
+      }
+      .backgroundColor(0xDCDCDC)
+      .scrollable(ScrollDirection.Horizontal) // 滚动方向纵向
+      .scrollBar(BarState.On) // 滚动条常驻显示
+      .scrollBarColor(Color.Gray) // 滚动条颜色
+      .scrollBarWidth(30) // 滚动条宽度
+      .edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹
+    }
+  }
+  ```
+  ![](figures/scrollcolumn.gif)
+
+
+
+
+

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

 # 媒体查询
 
 
-媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能：
+媒体查询（Media Query）作为响应式设计的核心，在移动设备上应用十分广泛。它根据不同设备类型或同设备不同状态修改应用的样式。媒体查询的优势有：
 
 
-1. 针对设备和应用的属性信息，可以设计出相匹配的布局样式。
+1. 提供丰富的媒体特征监听能力，针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。
 
-2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。
+2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面布局。
 
 
-## 如何使用
+   
 
-通过调用媒体查询接口，设置媒体查询条件和查询结果的回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑。
+## 媒体查询引入与使用流程
 
+通过调用媒体查询接口，设置媒体查询条件和查询结果的回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑。具体步骤如下：
 首先导入媒体查询模块，例如：
-```
+```ts
 import mediaquery from '@ohos.mediaquery'
 ```
-然后通过matchMediaSync接口设置媒体查询条件，并保存返回的条件监听句柄，例如：
+然后通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄listener，例如：
 ```ts
 listener = mediaquery.matchMediaSync('(orientation: landscape)')
 ```
-最后通过上面保存的条件监听句柄listener去注册回调函数，在回调函数里更改页面布局或者实现业务逻辑，当匹配到媒体查询条件时会触发此回调函数，例如：
+给条件监听句柄listener绑定回调函数onPortrait，当listener检测设备状态变化时执行回调函数。在回调函数内，根据不同设备状态更改页面布局或者实现业务逻辑，例如：
 ```ts
 onPortrait(mediaQueryResult) {
     if (mediaQueryResult.matches) {
@@ -33,19 +34,22 @@ onPortrait(mediaQueryResult) {
 listener.on('change', onPortrait)
 ```
 
-## 媒体查询条件语法规则
+## 媒体查询条件
+媒体查询条件由媒体类型，逻辑操作符，媒体特征组成，其中媒体类型可省略，逻辑操作符用于连接不同媒体类型与媒体特征，其中，媒体特征要使用()包裹且可以有多个。具体规则如下：
+
+### 语法规则
 ```
 [media-type] [and|not|only] [(media-feature)]
 ```
 例如：
 
-`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)` ：包含多个媒体特征的多条件复杂语句查询，当设备类型为tv或设备分辨率小于2时条件成立。
 
 ###  媒体类型(media-type)
 
@@ -54,7 +58,7 @@ listener.on('change', onPortrait)
 | screen | 按屏幕相关参数进行媒体查询。 |
 
 
-###  媒体逻辑操作(and|not|only)
+###  媒体逻辑操作(and|or|not|only)
 
 媒体逻辑操作符：and、or、not、only用于构成复杂媒体查询，也可以通过comma（,）将其组合起来，详细解释说明如下表。
 
@@ -62,11 +66,12 @@ listener.on('change', onPortrait)
 
 | 类型       | 说明                                       |
 | -------- | ---------------------------------------- |
-| and      | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 |
-| not      | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。<br/>例如：not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>使用not运算符时必须指定媒体类型。 |
+| and      | 将多个媒体特征（Media&nbsp;Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。<br/>例如：screen&nbsp;and&nbsp;(device-type:&nbsp;wearable)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当设备类型是智能穿戴且应用的最大高度小于等于600个像素单位时成立。 |
+| or       | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;（round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
+| not      | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。<br/>例如：not&nbsp;screen&nbsp;and&nbsp;(min-height:&nbsp;50)&nbsp;and&nbsp;(max-height:&nbsp;600)&nbsp;表示当应用高度小于50个像素单位或者大于600个像素单位时成立。<br/>使用not运算符时必须指定媒体类型。 |
 | only     | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：<br/>screen&nbsp;and&nbsp;(min-height:&nbsp;50)<br/>老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。<br/>使用only时必须指定媒体类型。 |
 | ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。<br/>例如：screen&nbsp;and&nbsp;(min-height:&nbsp;1000),&nbsp;&nbsp;（round-screen：true）&nbsp;表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
-| or       | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。<br/>例如：screen&nbsp;and&nbsp;(max-height:&nbsp;1000)&nbsp;or&nbsp;&nbsp;（round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
+
 
 在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了&lt;=，&gt;=，&lt;，&gt;操作符。
 
@@ -74,10 +79,10 @@ listener.on('change', onPortrait)
 
 | 类型    | 说明                                       |
 | ----- | ---------------------------------------- |
-| &lt;= | 小于等于，例如：screen&nbsp;and&nbsp;(50&nbsp;&lt;=&nbsp;height)。 |
-| &gt;= | 大于等于，例如：screen&nbsp;and&nbsp;(600&nbsp;&gt;=&nbsp;height)。 |
-| &lt;  | 小于，例如：screen&nbsp;and&nbsp;(50&nbsp;&lt;&nbsp;height)。 |
-| &gt;  | 大于，例如：screen&nbsp;and&nbsp;(600&nbsp;&gt;&nbsp;height)。 |
+| &lt;= | 小于等于，例如：screen&nbsp;and&nbsp;(height&nbsp;&lt;=&nbsp;50)。 |
+| &gt;= | 大于等于，例如：screen&nbsp;and&nbsp;(height&nbsp;&gt;=&nbsp;600)。 |
+| &lt;  | 小于，例如：screen&nbsp;and&nbsp;(height&nbsp;&lt;&nbsp;50)。 |
+| &gt;  | 大于，例如：screen&nbsp;and&nbsp;(height&nbsp;&gt;&nbsp;600)。 |
 
 
 ### 媒体特征(media-feature)
@@ -105,7 +110,7 @@ listener.on('change', onPortrait)
 
 ## 场景示例
 
-通过使用媒体查询实现当屏幕发生横竖屏切换，给页面文本应用不同的内容和样式。
+下例中使用媒体查询，实现屏幕横竖屏切换时给页面文本应用不同的内容和样式的效果。
 
   ```
   import mediaquery from '@ohos.mediaquery'
@@ -116,8 +121,7 @@ listener.on('change', onPortrait)
   struct MediaQueryExample {
     @State color: string = '#DB7093'
     @State text: string = 'Portrait'
-    @State fontSize: number = 24
-    listener = mediaquery.matchMediaSync('(orientation: landscape)')
+    listener = mediaquery.matchMediaSync('(orientation: landscape)')  // 当设备横屏时条件成立
   
     onPortrait(mediaQueryResult) {
       if (mediaQueryResult.matches) {
@@ -130,8 +134,8 @@ listener.on('change', onPortrait)
     }
   
     aboutToAppear() {
-      portraitFunc = this.onPortrait.bind(this) //绑定当前应用实例
-      this.listener.on('change', portraitFunc)
+      portraitFunc = this.onPortrait.bind(this) // 绑定当前应用实例
+      this.listener.on('change', portraitFunc)  
     }
   
     build() {
@@ -152,7 +156,7 @@ listener.on('change', onPortrait)
 
 ## 相关实例
 
-针对媒体查询开发，有以下相关实例可供参考：
+使用媒体查询的自适应布局开发，有以下相关实例可供参考：
 
 - [`MediaQuery`：媒体查询（eTS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/MediaQuery)
 

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

+# 层叠布局
+
+层叠布局（StackLayout）是所有布局中最为简单的一个布局，用于在屏幕上预留一个区域来显示组件中的元素,提供元素可以重叠的框架布局。
+通过层叠容器[Stack](../reference/arkui-ts/ts-container-stack.md)实现，容器中的子组件依次入栈，后一个子组件覆盖前一个子组件显示。
+
+## 对齐方式
+
+设置子组件在容器内的对齐方式。支持左上，上中，右上，左，中，右，右下，中下，右下九种对齐方式
+
+|名称|    描述| 图示 |
+|---|	---|---|
+|TopStart|    顶部起始端。|![](figures/stacktopstart.png)|
+Top    |顶部横向居中。|![](figures/stacktop.png)|
+TopEnd|    顶部尾端。|![](figures/stacktopend.png)|
+Start|    起始端纵向居中。|![](figures/stackstart.png)|
+Center|    横向和纵向居中。|![](figures/stackcenter.png)|
+End|    尾端纵向居中。|![](figures/stackend.png)|
+BottomStart    |底部起始端。|![](figures/stackbottomstart.png)|
+Bottom|    底部横向居中。|![](figures/stackbottom.png)|
+BottomEnd|    底部尾端。|![](figures/stackbottomend.png)|
+
+## Z序控制
+
+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)
+    ```
+    ![](figures/stack2.png)
+
+    上图中，最后的子元素3的尺寸大于前面的所有子元素，所以，前面两个元素完全隐藏，可以通过改变前面元素的zIndex属性展示出来:
+    ```ts
+    Stack({ alignContent: Alignment.BottomStart }) {
+      Column(){
+        Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20)
+      }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)
+      Column(){
+        Text('Stack子元素2').fontSize(20)
+      }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)
+      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)
+  通过Z序控制实现了显示效果。
+