add Grid

Signed-off-by: Nzhangshuqi <zhangshuqi7@huawei.com>

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Col/Grid_Col_Offset/Grid_Col_Offset_Default.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+@Entry
+@Component
+struct Grid_Col_Offset_Default {
+  @State addSpan: number = 0
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  messageManager:MessageManager = new MessageManager()
+  onPageShow() {
+    console.info('Grid_Col_Offset_Default onPageShow');
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: 6,
+        gutter: { x: 10, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp","200vp","300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index: number) => {
+          GridCol({span: 2}) {
+
+          }.borderColor(color).borderWidth(2).key("Grid_Col_Offset_Default_0" + index).height(50)
+        })
+      }.width("100%").height("100%")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width('300vp').height(500)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Col/Grid_Col_Offset/Grid_Col_Offset_GridColColumnOption.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+@Entry
+@Component
+struct Grid_Col_Offset_GridColColumnOption {
+  @State addWidth: string = '0'
+  @State addSpan: number = 2
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  messageManager:MessageManager = new MessageManager()
+  onPageShow() {
+    console.info('Grid_Col_Offset_GridColColumnOption onPageShow');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.error('message = ' + message.name + "--" + message.value);
+      if (message.name == 'addWidth') {
+        this.addWidth = message.value;
+      }else if (message.name == 'addSpan'){
+        this.addSpan = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: 6,
+        gutter: { x: 10, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp","200vp","300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index: number) => {
+          GridCol({span:this.addSpan, offset: {xs:1, sm:2, md:3, lg:4, xl:5, xxl:3}}) {
+
+          }.backgroundColor(color).key("Grid_Col_Offset_GridColColumnOption_0" + index).height(50)
+        })
+      }.width("100%").height("100%").key("Grid_Col_Offset_GridColColumnOption_G1")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width(this.addWidth).height(800)
+    .border({ color: '#880606' })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Col/Grid_Col_Offset/Grid_Col_Offset_Number.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+@Entry
+@Component
+struct Grid_Col_Offset_Number {
+  @State addOffset: number = 0
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  messageManager:MessageManager = new MessageManager()
+  onPageShow() {
+    console.info('Grid_Col_Offset_Number onPageShow');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.error('message = ' + message.name + "--" + message.value);
+      if (message.name == 'addOffset') {
+        this.addOffset = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: 6,
+        gutter: { x: 10, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp","200vp","300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index: number) => {
+          GridCol({span:2, offset: this.addOffset}) {
+
+          }.borderColor(color).borderWidth(2).key("Grid_Col_Offset_Number_0" + index).height(50)
+        })
+      }.width("100%").height("100%").key("Grid_Col_Offset_Number_G1")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width('300vp').height(500)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Col/Grid_Col_Order/Grid_Col_Order_Default.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+@Entry
+@Component
+struct Grid_Col_Order_Default {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  messageManager:MessageManager = new MessageManager()
+  onPageShow() {
+    console.info('Grid_Col_Order_Default onPageShow');
+
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: 6,
+        gutter: { x: 10, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp","200vp","300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({span:6}) {
+
+          }.borderColor(color).borderWidth(2).key("Grid_Col_Order_Default_0" + index ).height(50)
+        })
+      }.width("100%").height("100%")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width('300vp').height(500)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Col/Grid_Col_Order/Grid_Col_Order_GridColColumnOption.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+@Entry
+@Component
+struct Grid_Col_Order_GridColColumnOption {
+  @State addWidth: string = '0'
+  @State currentBp: string = 'unknown'
+  messageManager:MessageManager = new MessageManager()
+  onPageShow() {
+    console.info('Grid_Col_Order_GridColColumnOption onPageShow');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.error('message = ' + message.name + "--" + message.value);
+      if (message.name == 'addWidth') {
+        this.addWidth = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: 6,
+        gutter: { x: 10, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp","200vp","300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        GridCol({span:6,order:{xs:1,sm:2,md:3,lg:4,xl:5,xxl:6}}) {
+
+        }.borderColor(Color.Pink).borderWidth(2).key("Grid_Col_Order_GridColColumnOption_01").height(50)
+
+        GridCol({span:6,order:{xs:2,sm:3,md:4,lg:5,xl:0,xxl:1}}) {
+
+        }.borderColor(Color.Black).borderWidth(2).key("Grid_Col_Order_GridColColumnOption_02").height(50)
+
+        GridCol({span:6,order:{xs:3,sm:1,md:5,lg:-3,xl:1,xxl:2}}) {
+
+        }.borderColor(Color.Green).borderWidth(2).key("Grid_Col_Order_GridColColumnOption_03").height(50)
+
+        GridCol({span:6,order:{xs:5,sm:4,md:3,lg:2,xl:5,xxl:-1}}) {
+
+        }.borderColor(Color.Yellow).borderWidth(2).key("Grid_Col_Order_GridColColumnOption_04").height(50)
+
+      }.width("100%").height("100%")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width(this.addWidth).height(350)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Col/Grid_Col_Order/Grid_Col_Order_Number.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+@Entry
+@Component
+struct Grid_Col_Order_Number {
+  @State addOrder: number = 0
+  @State currentBp: string = 'unknown'
+  messageManager:MessageManager = new MessageManager()
+  onPageShow() {
+    console.info('Grid_Col_Order_Number onPageShow');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.error('message = ' + message.name + "--" + message.value);
+      if (message.name == 'addOrder') {
+        this.addOrder = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: 6,
+        gutter: { x: 10, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp","200vp","300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        GridCol({span:6,order:this.addOrder}) {
+
+        }.borderColor(Color.Red).borderWidth(2).key("Grid_Col_Order_Number_01").height(50)
+
+        GridCol({span:6}) {
+
+        }.borderColor(Color.Orange).borderWidth(2).key("Grid_Col_Order_Number_02").height(50)
+
+        GridCol({span:6}) {
+
+        }.borderColor(Color.Yellow).borderWidth(2).key("Grid_Col_Order_Number_03").height(50)
+
+        GridCol({span:6}) {
+
+        }.borderColor(Color.Green).borderWidth(2).key("Grid_Col_Order_Number_04").height(50)
+      }.width("100%").height("100%")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width('300vp').height(350)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Col/Grid_Col_Span/Grid_Col_Span_Default.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+@Entry
+@Component
+struct Grid_Col_Span_Default {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  messageManager:MessageManager = new MessageManager()
+  onPageShow() {
+    console.info('Grid_Col_Span_Default onPageShow');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: 6,
+        gutter: { x: 10, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp","200vp","300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index: number) => {
+          GridCol() {
+
+          }.borderColor(color).borderWidth(2).key("Grid_Col_Span_Default_0" + index).height(50)
+        })
+      }.width("100%").height("100%")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width('300vp').height(500)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Col/Grid_Col_Span/Grid_Col_Span_GridColColumnOption.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+@Entry
+@Component
+struct Grid_Col_Span_GridColColumnOption {
+  @State addWidth: string = '0'
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  messageManager:MessageManager = new MessageManager()
+  onPageShow() {
+    console.info('Grid_Col_Span_GridColColumnOption onPageShow');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.error('message = ' + message.name + "--" + message.value);
+      if (message.name == 'addWidth') {
+        this.addWidth = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: 6,
+        gutter: { x: 10, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp","200vp","300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index: number) => {
+          GridCol({span: {xs:1,sm:2,md:3,lg:4,xl:5,xxl:6}}) {
+
+          }.borderColor(color).borderWidth(2).key("Grid_Col_Span_GridColColumnOption_0" + index).height(50)
+        })
+      }.width("100%").height("100%")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width(this.addWidth).height(500)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Col/Grid_Col_Span/Grid_Col_Span_Number.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+@Entry
+@Component
+struct Grid_Col_Span_Number {
+  @State addSpan: number = 0
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  messageManager:MessageManager = new MessageManager()
+  onPageShow() {
+    console.info('Grid_Col_Span_Number onPageShow');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.error('message = ' + message.name + "--" + message.value);
+      if (message.name == 'addSpan') {
+        this.addSpan = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: 6,
+        gutter: { x: 10, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp","200vp","300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index: number) => {
+          GridCol({span: this.addSpan}) {
+
+          }.borderColor(color).borderWidth(2).key("Grid_Col_Span_Number_0" + index).height(50)
+        })
+      }.width("100%").height("100%")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width('300vp').height(500)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Change.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+
+@Entry
+@Component
+struct Grid_Row_Breakpoints_Change {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State columnsWidth: string = '300vp'
+  messageManager:MessageManager = new MessageManager();
+
+  onPageShow() {
+    console.info('Grid_Row_Breakpoints_Change');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.log('message = ' + message.name + "--" + message.value);
+      if (message.name == 'width') {
+        this.columnsWidth = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: {
+          x: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30},
+          y: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30}
+        },
+        breakpoints: { value: ["100vp", "200vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('Grid_Row_Breakpoints_Change' + index)
+        })
+      }.width("100%").height("100%")
+    }.width(this.columnsWidth).height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Component.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct Grid_Row_Breakpoints_Component {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: {
+          x: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30},
+          y: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30}
+        },
+        breakpoints: { value: ["50vp", "100vp", "150vp", "200vp", "300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('Grid_Row_Breakpoints_Component' + index)
+        })
+      }.width("100%").height("100%")
+    }.width('180vp').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Default.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+
+@Entry
+@Component
+struct Grid_Row_Breakpoints_Default {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State columnsWidth: string = '300vp'
+  messageManager:MessageManager = new MessageManager();
+
+  onPageShow() {
+    console.info('Grid_Row_Breakpoints_Default');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.log('message = ' + message.name + "--" + message.value);
+      if (message.name == 'width') {
+        this.columnsWidth = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: {
+          x: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30},
+          y: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30}
+        },
+        breakpoints: { value: ["320vp", "520vp", "840vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('Grid_Row_Breakpoints_Default' + index)
+        })
+      }.width("100%").height("100%")
+    }.width(this.columnsWidth).height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Incremental.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct Grid_Row_Breakpoints_Incremental {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: {
+          x: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30},
+          y: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30}
+        },
+        breakpoints: { value: ["50vp", "100vp", "200vp", "100vp", "300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('Grid_Row_Breakpoints_Incremental' + index)
+        })
+      }.width("100%").height("100%")
+    }.width('300vp').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Negative.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct Grid_Row_Breakpoints_Negative {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: {
+          x: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30},
+          y: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30}
+        },
+        breakpoints: { value: ["-50vp", "100vp", "200vp", "100vp", "300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('Grid_Row_Breakpoints_Negative' + index)
+        })
+      }.width("100%").height("100%")
+    }.width('300vp').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Quantity.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct Grid_Row_Breakpoints_Quantity {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink]
+
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: {
+          x: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30},
+          y: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30}
+        },
+        breakpoints: { value: ["50vp", "100vp", "150vp", "200vp", "300vp", "350vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('Grid_Row_Breakpoints_Quantity' + index)
+        })
+      }.width("100%").height("100%")
+    }.width('300vp').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Window.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@Entry
+@Component
+struct Grid_Row_Breakpoints_Window {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: {
+          x: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30},
+          y: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30}
+        },
+        breakpoints: { value: ["50vp", "100vp", "150vp", "200vp", "300vp"],
+          reference: BreakpointsReference.WindowSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('Grid_Row_Breakpoints_Window' + index)
+        })
+      }.width("100%").height("100%")
+    }.width('180vp').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Columns/Grid_Row_Columns.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+@Entry
+@Component
+struct Grid_Row_Columns {
+  @State addWidth: string = '0'
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  messageManager:MessageManager = new MessageManager()
+  onPageShow() {
+    console.info('Grid_Col_Span_GridColColumnOption onPageShow');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.error('message = ' + message.name + "--" + message.value);
+      if (message.name == 'addWidth') {
+        this.addWidth = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: {xs:1, sm:2, md:3, lg:4, xl:5, xxl:6},
+        gutter: { x: 10, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp","200vp","300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index: number) => {
+          GridCol({span: 1}) {
+
+          }.borderColor(color).borderWidth(2).key("Grid_Row_Columns_0" + index).height(50)
+        })
+      }.width("100%").height("100%")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width(this.addWidth).height(500)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Columns/Grid_Row_Columns_Default.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@Entry
+@Component
+struct Grid_Row_Columns_Default {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State GridRowColumns: number = 12
+
+  build() {
+    Column() {
+      GridRow({
+        columns: this.GridRowColumns,
+        gutter: 5,
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('GridRow_Columns_' + index)
+        })
+      }.width("100%").height("100%").key('GridRow_Columns_001')
+    }.width('90%').margin({ left: 10, top: 5, bottom: 5 }).height(200)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Columns/Grid_Row_Columns_Option.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+
+@Entry
+@Component
+struct Grid_Row_Columns_Option {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State columnsOption: string = '30pv'
+
+  messageManager:MessageManager = new MessageManager();
+
+  onPageShow() {
+    console.info('Grid_Row_Columns_Option');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.log('message = ' + message.name + "--" + message.value);
+      if (message.name == 'option') {
+        this.columnsOption = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: 5,
+        breakpoints: { value: ["50vp", "100vp", "150vp", "200vp", "300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('GridRow_Columns_Option' + index)
+        })
+      }.width("100%").height("100%").key('GridRow_Columns_Option001')
+    }.width(this.columnsOption).height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Direction/Grid_Row_Direction_Row.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@Entry
+@Component
+struct Grid_Row_Direction_Row {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: { x: 10, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp", "200vp", "300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('DirectionRow_' + index)
+        })
+      }.key('DirectionRow_001')
+    }.width('80pv').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Direction/Grid_Row_Direction_RowReverse.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@Entry
+@Component
+struct Grid_Row_Direction_RowReverse {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: { x: 10,y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp", "200vp", "300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.RowReverse
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('DirectionRowReverse_' + index)
+        })
+      }.key('DirectionRowReverse_001')
+    }.width('80pv').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Gutter/Grid_Row_Default.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@Entry
+@Component
+struct Gutter_Length_Default {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        breakpoints: { value: ["400vp", "600vp", "800vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('Length_NoChange_' + index)
+        })
+      }.width("100%").height("100%").key('Length_NoChange001')
+    }.width('80vp').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Gutter/Grid_Row_Gutter.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+@Entry
+@Component
+struct Grid_Row_Gutter {
+  @State addLength: number = 0
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  messageManager:MessageManager = new MessageManager()
+  onPageShow() {
+    console.info('Grid_Col_Span_GridColColumnOption onPageShow');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.error('message = ' + message.name + "--" + message.value);
+      if (message.name == 'addLength') {
+        this.addLength = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: 6,
+        gutter: { x: this.addLength, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp","200vp","300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index: number) => {
+          GridCol({span: 1}) {
+
+          }.borderColor(color).borderWidth(2).key("Grid_Row_Gutter_0" + index).height(50)
+        })
+      }.width("100%").height("100%")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width(300).height(500)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Gutter/Grid_Row_Length_String.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+@Entry
+@Component
+struct Grid_Row_Length_String  {
+  @State addLength: string = '0'
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  messageManager:MessageManager = new MessageManager()
+  onPageShow() {
+    console.info('Grid_Row_Length_String  onPageShow');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.error('message = ' + message.name + "--" + message.value);
+      if (message.name == 'addLength') {
+        this.addLength = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+  build() {
+    Column() {
+      GridRow({
+        columns: 6,
+        gutter: { x: this.addLength, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp","200vp","300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index: number) => {
+          GridCol({span: 1}) {
+
+          }.borderColor(color).borderWidth(2).key("Length_String_0" + index).height(50)
+        })
+      }.width("100%").height("100%")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width(300).height(500)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_Gutter/Grid_Row_Resource.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@Entry
+@Component
+struct Gutter_Length_Resource {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: $r('app.float.float_1'),
+        breakpoints: { value: ["50vp", "100vp", "150vp", "200vp", "300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('Length_Resource_' + index)
+        })
+      }.key('Length_Resource001')
+    }.width('80pv').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_GutterOption/Grid_Row_GutterOption_Default.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+
+@Entry
+@Component
+struct Grid_Row_GutterOption_Default {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  @State gutterOptionX: number = 0
+  @State gutterOptionY: number = 0
+  messageManager:MessageManager = new MessageManager()
+
+  onPageShow() {
+    console.info('Grid_Row_GutterOption_Default');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.log('message = ' + message.name + "--" + message.value);
+      if (message.name == 'optionX') {
+        this.gutterOptionX = message.value;
+      } else if (message.name == 'optionY') {
+        this.gutterOptionY = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: { x: this.gutterOptionX,y: this.gutterOptionY, },
+        breakpoints: { value: ["50vp", "100vp", "150vp", "200vp", "300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('GutterOptionChange_' + index)
+        })
+      }.key('GutterOptionChange_001')
+    }.width('80pv').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_GutterOption/Grid_Row_GutterOption_Number.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+
+@Entry
+@Component
+struct Grid_Row_GutterOption_Number {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  @State gutterLength: number = 0;
+  messageManager:MessageManager = new MessageManager();
+
+  onPageShow() {
+    console.info('Grid_Row_GutterOption_Number');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.log('message = ' + message.name + "--" + message.value);
+      if (message.name == 'length') {
+        this.gutterLength = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: { x: this.gutterLength, y: 10 },
+        breakpoints: { value: ["50vp", "100vp", "150vp", "200vp", "300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('Length_NumberChange_' + index)
+        })
+      }
+      .key('Length_Number001')
+    }.width('80pv').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_GutterOption/Grid_Row_GutterOption_String.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+
+@Entry
+@Component
+struct Grid_Row_GutterOption_String {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  @State gutterLength: string = '0';
+  messageManager:MessageManager = new MessageManager();
+
+  onPageShow() {
+    console.info('Grid_Row_GutterOption_String');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.log('message = ' + message.name + "--" + message.value);
+      if (message.name == 'length') {
+        this.gutterLength = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: { x: this.gutterLength, y: this.gutterLength },
+        breakpoints: { value: ["50vp", "100vp", "150vp", "200vp", "300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('Grid_Row_GutterOption_String' + index)
+        })
+      }
+    }.width('80pv').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/Grid_Row_GutterOption/Grid_Row_SizeOption.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { MessageManager, Callback } from '../../../../common/MessageManager';
+
+@Entry
+@Component
+struct Grid_Row_SizeOption {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  @State gridRowSize: string = '0';
+  messageManager:MessageManager = new MessageManager();
+
+  onPageShow() {
+    console.info('Grid_Row_SizeOption');
+    globalThis.value = {
+      name:'messageManager',message:this.messageManager
+    }
+    let callback:Callback = (message:any) => {
+      console.log('message = ' + message.name + "--" + message.value);
+      if (message.name == 'size') {
+        this.gridRowSize = message.value;
+      }
+    }
+    this.messageManager.registerCallback(callback);
+  }
+
+  build() {
+    Column() {
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: 5,
+        breakpoints: { value: ["50vp", "100vp", "150vp", "200vp", "300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('Grid_Row_SizeOption' + index)
+        })
+      }
+    }.width(this.gridRowSize).height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/MainAbility/pages/Grid/Grid_Row/onBreakpointChange/onBreakpointChange.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@Entry
+@Component
+struct GridRow_onBreakpoint {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+  @State textBreakpoint: string = 'xs'
+
+  build() {
+    Column() {
+      Text(this.textBreakpoint).fontSize(9).fontColor(0xCCCCCC).key('textBreakpointChange')
+      GridRow({
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6},
+        gutter: {
+          x: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30},
+          y: { xs: 5, sm: 10, md: 15, lg: 20, xl: 25, xxl: 30}
+        },
+        breakpoints: { value: ["50vp", "100vp", "150vp", "200vp", "300vp"],
+          reference: BreakpointsReference.ComponentSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: 1 }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).key('GridRow_onBreakpoint_' + index)
+        })
+      }
+      .key('GridRow_onBreakpoint001')
+      .onBreakpointChange((breakpoint) => {
+        console.log('breakpoint:' + breakpoint)
+        this.textBreakpoint = breakpoint;
+      })
+    }.width('300pv').height(200)
+  }
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Col/Grid_Col_Offset/Grid_Col_Offset_Default.test.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+import {MessageManager,Callback} from '../../../../MainAbility/common/MessageManager';
+
+export default function Grid_Col_Offset_Default() {
+  describe('Grid_Col_Offset_Default', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Col_Offset_Default beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Col/Grid_Col_Offset/Grid_Col_Offset_Default",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Col_Offset_Default state pages:" + JSON.stringify(pages));
+        if (!("Grid_Col_Offset_Default" == pages.name)) {
+          console.info("get Grid_Col_Offset_Default pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Col_Offset_Default page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Col_Offset_Default page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Col_Offset_Default after each called")
+    });
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Offset_Default_TEST_0100
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol does not set offset
+     */
+    it('SUB_ACE_Grid_Col_Offset_Default_TEST_0100', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Offset_Default_TEST_0100] START');
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Offset_Default_00 = CommonFunc.getComponentRect('Grid_Col_Offset_Default_00');
+      let Grid_Col_Offset_Default_01 = CommonFunc.getComponentRect('Grid_Col_Offset_Default_01');
+      let Grid_Col_Offset_Default_02 = CommonFunc.getComponentRect('Grid_Col_Offset_Default_02');
+      let Grid_Col_Offset_Default_03 = CommonFunc.getComponentRect('Grid_Col_Offset_Default_03');
+      let Grid_Col_Offset_Default_04 = CommonFunc.getComponentRect('Grid_Col_Offset_Default_04');
+      let Grid_Col_Offset_Default_05 = CommonFunc.getComponentRect('Grid_Col_Offset_Default_05');
+      let Grid_Col_Offset_Default_06 = CommonFunc.getComponentRect('Grid_Col_Offset_Default_06');
+      let Grid_Col_Offset_Default_07 = CommonFunc.getComponentRect('Grid_Col_Offset_Default_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Offset_Default_01.left - Grid_Col_Offset_Default_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Default_02.left - Grid_Col_Offset_Default_01.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Default_04.left - Grid_Col_Offset_Default_03.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Default_05.left - Grid_Col_Offset_Default_04.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Default_07.left - Grid_Col_Offset_Default_06.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Default_03.top - Grid_Col_Offset_Default_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Default_04.top - Grid_Col_Offset_Default_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Default_05.top - Grid_Col_Offset_Default_02.bottom)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Default_06.top - Grid_Col_Offset_Default_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Default_07.top - Grid_Col_Offset_Default_04.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Offset_Default_TEST_0100] END');
+      done();
+    });
+
+  })
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Col/Grid_Col_Offset/Grid_Col_Offset_Number.test.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+import {MessageManager,Callback} from '../../../../MainAbility/common/MessageManager';
+
+export default function Grid_Col_Offset_Number() {
+  describe('Grid_Col_Offset_Number', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Col_Offset_Number beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Col/Grid_Col_Offset/Grid_Col_Offset_Number",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Col_Offset_Number state pages:" + JSON.stringify(pages));
+        if (!("Grid_Col_Offset_Number" == pages.name)) {
+          console.info("get Grid_Col_Offset_Number pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Col_Offset_Number page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Col_Offset_Number page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Col_Offset_Number after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Offset_Number_TEST_0100
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to -2
+     */
+    it('SUB_ACE_Grid_Col_Offset_Number_TEST_0100', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Offset_Number_TEST_0100] START');
+      globalThis.value.message.notify({name:'addOffset', value:-2});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Offset_Number_00 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_00');
+      let Grid_Col_Offset_Number_01 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_01');
+      let Grid_Col_Offset_Number_02 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_02');
+      let Grid_Col_Offset_Number_03 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_03');
+      let Grid_Col_Offset_Number_04 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_04');
+      let Grid_Col_Offset_Number_05 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_05');
+      let Grid_Col_Offset_Number_06 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_06');
+      let Grid_Col_Offset_Number_07 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_07');
+      let Grid_Col_Offset_Number_G1 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_G1');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Offset_Number_01.left - Grid_Col_Offset_Number_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_02.left - Grid_Col_Offset_Number_01.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Number_04.left - Grid_Col_Offset_Number_03.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_05.left - Grid_Col_Offset_Number_04.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Number_07.left - Grid_Col_Offset_Number_06.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Number_03.top - Grid_Col_Offset_Number_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_04.top - Grid_Col_Offset_Number_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_05.top - Grid_Col_Offset_Number_02.bottom)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Number_06.top - Grid_Col_Offset_Number_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_07.top - Grid_Col_Offset_Number_04.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Offset_Number_TEST_0100] END');
+      done();
+    });
+
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Offset_Number_TEST_0200
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to 0
+     */
+    it('SUB_ACE_Grid_Col_Offset_Number_TEST_0200', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Offset_Number_TEST_0200] START');
+      globalThis.value.message.notify({name:'addOffset', value:0});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Offset_Number_00 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_00');
+      let Grid_Col_Offset_Number_01 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_01');
+      let Grid_Col_Offset_Number_02 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_02');
+      let Grid_Col_Offset_Number_03 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_03');
+      let Grid_Col_Offset_Number_04 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_04');
+      let Grid_Col_Offset_Number_05 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_05');
+      let Grid_Col_Offset_Number_06 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_06');
+      let Grid_Col_Offset_Number_07 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Offset_Number_01.left - Grid_Col_Offset_Number_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_02.left - Grid_Col_Offset_Number_01.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Number_04.left - Grid_Col_Offset_Number_03.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_05.left - Grid_Col_Offset_Number_04.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Number_07.left - Grid_Col_Offset_Number_06.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Number_03.top - Grid_Col_Offset_Number_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_04.top - Grid_Col_Offset_Number_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_05.top - Grid_Col_Offset_Number_02.bottom)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Number_06.top - Grid_Col_Offset_Number_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_07.top - Grid_Col_Offset_Number_04.bottom)).assertEqual(vp2px(10));
+
+
+      console.info('[SUB_ACE_Grid_Col_Offset_Number_TEST_0200] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Offset_Number_TEST_0300
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to 1
+     */
+    it('SUB_ACE_Grid_Col_Offset_Number_TEST_0300', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Offset_Number_TEST_0300] START');
+      globalThis.value.message.notify({name:'addOffset', value:1});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Offset_Number_00 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_00');
+      let Grid_Col_Offset_Number_01 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_01');
+      let Grid_Col_Offset_Number_02 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_02');
+      let Grid_Col_Offset_Number_03 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_03');
+      let Grid_Col_Offset_Number_04 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_04');
+      let Grid_Col_Offset_Number_05 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_05');
+      let Grid_Col_Offset_Number_06 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_06');
+      let Grid_Col_Offset_Number_07 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_07');
+      let Grid_Col_Offset_Number_G1 = CommonFunc.getComponentRect('Grid_Col_Offset_Number_G1');
+
+      console.log('assert space')
+
+      expect(Math.round(Grid_Col_Offset_Number_02.top - Grid_Col_Offset_Number_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_03.top - Grid_Col_Offset_Number_01.bottom)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Number_04.top - Grid_Col_Offset_Number_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_05.top - Grid_Col_Offset_Number_03.bottom)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Offset_Number_06.top - Grid_Col_Offset_Number_04.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Offset_Number_07.top - Grid_Col_Offset_Number_05.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Offset_Number_TEST_0300] END');
+      done();
+    });
+
+  })
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Col/Grid_Col_Order/Grid_Col_Order_Default.test.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+import {MessageManager,Callback} from '../../../../MainAbility/common/MessageManager';
+
+export default function Grid_Col_Order_Default() {
+  describe('Grid_Col_Order_Default', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Col_Order_Default beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Col/Grid_Col_Order/Grid_Col_Order_Default",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Col_Order_Default state pages:" + JSON.stringify(pages));
+        if (!("Grid_Col_Order_Default" == pages.name)) {
+          console.info("get Grid_Col_Order_Default pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Col_Order_Default page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Col_Order_Default page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Col_Order_Default after each called")
+    });
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Order_Default_TEST_0100
+     * @tc.name      testGridColOrder
+     * @tc.desc      GridCol does not set order
+     */
+    it('SUB_ACE_Grid_Col_Order_Default_TEST_0100', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Order_Default_TEST_0100] START');
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Order_Default_00 = CommonFunc.getComponentRect('Grid_Col_Order_Default_00');
+      let Grid_Col_Order_Default_01 = CommonFunc.getComponentRect('Grid_Col_Order_Default_01');
+      let Grid_Col_Order_Default_02 = CommonFunc.getComponentRect('Grid_Col_Order_Default_02');
+      let Grid_Col_Order_Default_03 = CommonFunc.getComponentRect('Grid_Col_Order_Default_03');
+      let Grid_Col_Order_Default_04 = CommonFunc.getComponentRect('Grid_Col_Order_Default_04');
+      let Grid_Col_Order_Default_05 = CommonFunc.getComponentRect('Grid_Col_Order_Default_05');
+      let Grid_Col_Order_Default_06 = CommonFunc.getComponentRect('Grid_Col_Order_Default_06');
+      let Grid_Col_Order_Default_07 = CommonFunc.getComponentRect('Grid_Col_Order_Default_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Order_Default_01.top - Grid_Col_Order_Default_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_Default_02.top - Grid_Col_Order_Default_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_Default_03.top - Grid_Col_Order_Default_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_Default_04.top - Grid_Col_Order_Default_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_Default_05.top - Grid_Col_Order_Default_04.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_Default_06.top - Grid_Col_Order_Default_05.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_Default_07.top - Grid_Col_Order_Default_06.bottom)).assertEqual(vp2px(10));
+
+
+      console.info('[SUB_ACE_Grid_Col_Order_Default_TEST_0100] END');
+      done();
+    });
+
+  })
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Col/Grid_Col_Order/Grid_Col_Order_GridColColumnOption.test.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+import {MessageManager,Callback} from '../../../../MainAbility/common/MessageManager';
+
+export default function Grid_Col_Order_GridColColumnOption() {
+  describe('Grid_Col_Order_GridColColumnOption', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Col_Order_GridColColumnOption beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Col/Grid_Col_Order/Grid_Col_Order_GridColColumnOption",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Col_Order_GridColColumnOption state pages:" + JSON.stringify(pages));
+        if (!("Grid_Col_Order_GridColColumnOption" == pages.name)) {
+          console.info("get Grid_Col_Order_GridColColumnOption pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Col_Order_GridColColumnOption page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Col_Order_GridColColumnOption page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Col_Order_GridColColumnOption after each called")
+    });
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0100
+     * @tc.name      testGridColOrder
+     * @tc.desc      Set the width of Column to 40vp
+     */
+    it('SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0100', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0100] START');
+      globalThis.value.message.notify({name:'addOrder', value:"40vp"});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Order_GridColColumnOption_01 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_01');
+      let Grid_Col_Order_GridColColumnOption_02 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_02');
+      let Grid_Col_Order_GridColColumnOption_03 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_03');
+      let Grid_Col_Order_GridColColumnOption_04 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_04');
+
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_02.top - Grid_Col_Order_GridColColumnOption_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_03.top - Grid_Col_Order_GridColColumnOption_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_04.top - Grid_Col_Order_GridColColumnOption_03.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0100] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0200
+     * @tc.name      testGridColOrder
+     * @tc.desc      Set the width of Column to 80vp
+     */
+    it('SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0200', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0200] START');
+      globalThis.value.message.notify({name:'addWidth', value:'80vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Order_GridColColumnOption_01 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_01');
+      let Grid_Col_Order_GridColColumnOption_02 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_02');
+      let Grid_Col_Order_GridColColumnOption_03 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_03');
+      let Grid_Col_Order_GridColColumnOption_04 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_04');
+
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_01.top - Grid_Col_Order_GridColColumnOption_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_02.top - Grid_Col_Order_GridColColumnOption_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_04.top - Grid_Col_Order_GridColColumnOption_02.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0200] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0300
+     * @tc.name      testGridColOrder
+     * @tc.desc      Set the width of Column to 120vp
+     */
+    it('SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0300', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0300] START');
+      globalThis.value.message.notify({name:'addWidth', value:'130vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Order_GridColColumnOption_01 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_01');
+      let Grid_Col_Order_GridColColumnOption_02 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_02');
+      let Grid_Col_Order_GridColColumnOption_03 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_03');
+      let Grid_Col_Order_GridColColumnOption_04 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_04');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_04.top - Grid_Col_Order_GridColColumnOption_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_02.top - Grid_Col_Order_GridColColumnOption_04.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_03.top - Grid_Col_Order_GridColColumnOption_02.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0300] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0400
+     * @tc.name      testGridColOrder
+     * @tc.desc      Set the width of Column to 180vp
+     */
+    it('SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0400', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0400] START');
+      globalThis.value.message.notify({name:'addWidth', value:'180vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Order_GridColColumnOption_01 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_01');
+      let Grid_Col_Order_GridColColumnOption_02 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_02');
+      let Grid_Col_Order_GridColColumnOption_03 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_03');
+      let Grid_Col_Order_GridColColumnOption_04 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_04');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_01.top - Grid_Col_Order_GridColColumnOption_04.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_02.top - Grid_Col_Order_GridColColumnOption_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_03.top - Grid_Col_Order_GridColColumnOption_02.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0400] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0500
+     * @tc.name      testGridColOrder
+     * @tc.desc      Set the width of Column to 220vp
+     */
+    it('SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0500', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0500] START');
+      globalThis.value.message.notify({name:'addWidth', value:'230vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Order_GridColColumnOption_01 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_01');
+      let Grid_Col_Order_GridColColumnOption_02 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_02');
+      let Grid_Col_Order_GridColColumnOption_03 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_03');
+      let Grid_Col_Order_GridColColumnOption_04 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_04');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_03.top - Grid_Col_Order_GridColColumnOption_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_01.top - Grid_Col_Order_GridColColumnOption_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_04.top - Grid_Col_Order_GridColColumnOption_01.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0500] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0600
+     * @tc.name      testGridColOrder
+     * @tc.desc      Set the width of Column to 320vp
+     */
+    it('SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0600', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0600] START');
+      globalThis.value.message.notify({name:'addWidth', value:'330vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Order_GridColColumnOption_01 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_01');
+      let Grid_Col_Order_GridColColumnOption_02 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_02');
+      let Grid_Col_Order_GridColColumnOption_03 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_03');
+      let Grid_Col_Order_GridColColumnOption_04 = CommonFunc.getComponentRect('Grid_Col_Order_GridColColumnOption_04');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_03.top - Grid_Col_Order_GridColColumnOption_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_04.top - Grid_Col_Order_GridColColumnOption_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_GridColColumnOption_01.top - Grid_Col_Order_GridColColumnOption_04.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Order_GridColColumnOption_TEST_0600] END');
+      done();
+    });
+  })
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Col/Grid_Col_Order/Grid_Col_Order_Number.test.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+import {MessageManager,Callback} from '../../../../MainAbility/common/MessageManager';
+
+export default function Grid_Col_Order_Number() {
+  describe('Grid_Col_Order_Number', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Col_Order_Number beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Col/Grid_Col_Order/Grid_Col_Order_Number",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Col_Order_Number state pages:" + JSON.stringify(pages));
+        if (!("Grid_Col_Order_Number" == pages.name)) {
+          console.info("get Grid_Col_Order_Number pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Col_Order_Number page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Col_Order_Number page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Col_Order_Number after each called")
+    });
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Order_Number_TEST_0100
+     * @tc.name      testGridColOrder
+     * @tc.desc      GridCol sets order to -1
+     */
+    it('SUB_ACE_Grid_Col_Order_Number_TEST_0100', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Order_Number_TEST_0100] START');
+      globalThis.value.message.notify({name:'addOrder', value:-1});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Order_Number_01 = CommonFunc.getComponentRect('Grid_Col_Order_Number_01');
+      let Grid_Col_Order_Number_02 = CommonFunc.getComponentRect('Grid_Col_Order_Number_02');
+      let Grid_Col_Order_Number_03 = CommonFunc.getComponentRect('Grid_Col_Order_Number_03');
+      let Grid_Col_Order_Number_04 = CommonFunc.getComponentRect('Grid_Col_Order_Number_04');
+
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Order_Number_02.top - Grid_Col_Order_Number_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_Number_03.top - Grid_Col_Order_Number_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_Number_04.top - Grid_Col_Order_Number_03.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Order_Number_TEST_0100] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Order_Number_TEST_0200
+     * @tc.name      testGridColOrder
+     * @tc.desc      GridCol sets order to 0
+     */
+    it('SUB_ACE_Grid_Col_Order_Number_TEST_0200', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Order_Number_TEST_0200] START');
+      globalThis.value.message.notify({name:'addOrder', value:0});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Order_Number_01 = CommonFunc.getComponentRect('Grid_Col_Order_Number_01');
+      let Grid_Col_Order_Number_02 = CommonFunc.getComponentRect('Grid_Col_Order_Number_02');
+      let Grid_Col_Order_Number_03 = CommonFunc.getComponentRect('Grid_Col_Order_Number_03');
+      let Grid_Col_Order_Number_04 = CommonFunc.getComponentRect('Grid_Col_Order_Number_04');
+
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Order_Number_02.top - Grid_Col_Order_Number_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_Number_03.top - Grid_Col_Order_Number_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_Number_04.top - Grid_Col_Order_Number_03.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Order_Number_TEST_0200] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Order_Number_TEST_0300
+     * @tc.name      testGridColOrder
+     * @tc.desc      GridCol sets order to 2
+     */
+    it('SUB_ACE_Grid_Col_Order_Number_TEST_0300', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Order_Number_TEST_0300] START');
+      globalThis.value.message.notify({name:'addOrder', value:2});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Order_Number_01 = CommonFunc.getComponentRect('Grid_Col_Order_Number_01');
+      let Grid_Col_Order_Number_02 = CommonFunc.getComponentRect('Grid_Col_Order_Number_02');
+      let Grid_Col_Order_Number_03 = CommonFunc.getComponentRect('Grid_Col_Order_Number_03');
+      let Grid_Col_Order_Number_04 = CommonFunc.getComponentRect('Grid_Col_Order_Number_04');
+
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Order_Number_03.top - Grid_Col_Order_Number_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_Number_04.top - Grid_Col_Order_Number_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Order_Number_01.top - Grid_Col_Order_Number_04.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Order_Number_TEST_0300] END');
+      done();
+    });
+
+  })
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Col/Grid_Col_Span/Grid_Col_Span_Default.test.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+import {MessageManager,Callback} from '../../../../MainAbility/common/MessageManager';
+
+export default function Grid_Col_Span_Default() {
+  describe('Grid_Col_Span_Default', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Col_Span_Default beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Col/Grid_Col_Span/Grid_Col_Span_Default",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Col_Span_Default state pages:" + JSON.stringify(pages));
+        if (!("Grid_Col_Span_Default" == pages.name)) {
+          console.info("get Grid_Col_Span_Default pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Col_Span_Default page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Col_Span_Default page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Col_Span_Default after each called")
+    });
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Span_Default_TEST_0100
+     * @tc.name      testGridColSpan
+     * @tc.desc      GridCol does not set span
+     */
+    it('SUB_ACE_Grid_Col_Span_Default_TEST_0100', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Span_Default_TEST_0100] START');
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Span_Default_00 = CommonFunc.getComponentRect('Grid_Col_Span_Default_00');
+      let Grid_Col_Span_Default_01 = CommonFunc.getComponentRect('Grid_Col_Span_Default_01');
+      let Grid_Col_Span_Default_02 = CommonFunc.getComponentRect('Grid_Col_Span_Default_02');
+      let Grid_Col_Span_Default_03 = CommonFunc.getComponentRect('Grid_Col_Span_Default_03');
+      let Grid_Col_Span_Default_04 = CommonFunc.getComponentRect('Grid_Col_Span_Default_04');
+      let Grid_Col_Span_Default_05 = CommonFunc.getComponentRect('Grid_Col_Span_Default_05');
+      let Grid_Col_Span_Default_06 = CommonFunc.getComponentRect('Grid_Col_Span_Default_06');
+      let Grid_Col_Span_Default_07 = CommonFunc.getComponentRect('Grid_Col_Span_Default_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Span_Default_01.left - Grid_Col_Span_Default_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Default_02.left - Grid_Col_Span_Default_01.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Default_03.left - Grid_Col_Span_Default_02.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Default_04.left - Grid_Col_Span_Default_03.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Default_05.left - Grid_Col_Span_Default_04.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Default_06.top - Grid_Col_Span_Default_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Default_07.top - Grid_Col_Span_Default_01.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Span_Default_TEST_0100] END');
+      done();
+    });
+
+  })
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Col/Grid_Col_Span/Grid_Col_Span_GridColColumnOption.test.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+import {MessageManager,Callback} from '../../../../MainAbility/common/MessageManager';
+
+export default function Grid_Col_Span_GridColColumnOption() {
+  describe('Grid_Col_Span_GridColColumnOption', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Col_Span_GridColColumnOption beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Col/Grid_Col_Span/Grid_Col_Span_GridColColumnOption",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Col_Span_GridColColumnOption state pages:" + JSON.stringify(pages));
+        if (!("Grid_Col_Span_GridColColumnOption" == pages.name)) {
+          console.info("get Grid_Col_Span_GridColColumnOption pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Col_Span_GridColColumnOption page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Col_Span_GridColColumnOption page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Col_Span_GridColColumnOption after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0100
+     * @tc.name      testGridColSpan
+     * @tc.desc      Set the width of Column to 40vp
+     */
+    it('SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0100', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0100] START');
+      globalThis.value.message.notify({name:'addWidth', value:'40vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Span_GridColColumnOption_00 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_00');
+      let Grid_Col_Span_GridColColumnOption_01 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_01');
+      let Grid_Col_Span_GridColColumnOption_02 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_02');
+      let Grid_Col_Span_GridColColumnOption_03 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_03');
+      let Grid_Col_Span_GridColColumnOption_04 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_04');
+      let Grid_Col_Span_GridColColumnOption_05 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_05');
+      let Grid_Col_Span_GridColColumnOption_06 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_06');
+      let Grid_Col_Span_GridColColumnOption_07 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_07');
+
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_06.top - Grid_Col_Span_GridColColumnOption_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_07.top - Grid_Col_Span_GridColColumnOption_01.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0100] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0200
+     * @tc.name      testGridColSpan
+     * @tc.desc      Set the width of Column to 80vp
+     */
+    it('SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0200', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0200] START');
+      globalThis.value.message.notify({name:'addWidth', value:"80vp"});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Span_GridColColumnOption_00 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_00');
+      let Grid_Col_Span_GridColColumnOption_01 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_01');
+      let Grid_Col_Span_GridColColumnOption_02 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_02');
+      let Grid_Col_Span_GridColColumnOption_03 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_03');
+      let Grid_Col_Span_GridColColumnOption_04 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_04');
+      let Grid_Col_Span_GridColColumnOption_05 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_05');
+      let Grid_Col_Span_GridColColumnOption_06 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_06');
+      let Grid_Col_Span_GridColColumnOption_07 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_01.left - Grid_Col_Span_GridColColumnOption_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_02.left - Grid_Col_Span_GridColColumnOption_01.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_04.left - Grid_Col_Span_GridColColumnOption_03.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_05.left - Grid_Col_Span_GridColColumnOption_04.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_07.left - Grid_Col_Span_GridColColumnOption_06.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_03.top - Grid_Col_Span_GridColColumnOption_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_04.top - Grid_Col_Span_GridColColumnOption_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_05.top - Grid_Col_Span_GridColColumnOption_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_06.top - Grid_Col_Span_GridColColumnOption_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_07.top - Grid_Col_Span_GridColColumnOption_04.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0200] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0300
+     * @tc.name      testGridColSpan
+     * @tc.desc      Set the width of Column to 120vp
+     */
+    it('SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0300', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0300] START');
+      globalThis.value.message.notify({name:'addWidth', value:'130vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Span_GridColColumnOption_00 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_00');
+      let Grid_Col_Span_GridColColumnOption_01 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_01');
+      let Grid_Col_Span_GridColColumnOption_02 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_02');
+      let Grid_Col_Span_GridColColumnOption_03 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_03');
+      let Grid_Col_Span_GridColColumnOption_04 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_04');
+      let Grid_Col_Span_GridColColumnOption_05 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_05');
+      let Grid_Col_Span_GridColColumnOption_06 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_06');
+      let Grid_Col_Span_GridColColumnOption_07 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_01.left - Grid_Col_Span_GridColColumnOption_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_03.left - Grid_Col_Span_GridColColumnOption_02.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_05.left - Grid_Col_Span_GridColColumnOption_04.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_07.left - Grid_Col_Span_GridColColumnOption_06.right)).assertEqual(vp2px(10));
+
+
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_02.top - Grid_Col_Span_GridColColumnOption_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_04.top - Grid_Col_Span_GridColColumnOption_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_06.top - Grid_Col_Span_GridColColumnOption_04.bottom)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_03.top - Grid_Col_Span_GridColColumnOption_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_05.top - Grid_Col_Span_GridColColumnOption_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_07.top - Grid_Col_Span_GridColColumnOption_05.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0300] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0400
+     * @tc.name      testGridColSpan
+     * @tc.desc      Set the width of Column to 120vp
+     */
+    it('SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0400', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0400] START');
+      globalThis.value.message.notify({name:'addWidth', value:'180vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Span_GridColColumnOption_00 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_00');
+      let Grid_Col_Span_GridColColumnOption_01 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_01');
+      let Grid_Col_Span_GridColColumnOption_02 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_02');
+      let Grid_Col_Span_GridColColumnOption_03 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_03');
+      let Grid_Col_Span_GridColColumnOption_04 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_04');
+      let Grid_Col_Span_GridColColumnOption_05 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_05');
+      let Grid_Col_Span_GridColColumnOption_06 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_06');
+      let Grid_Col_Span_GridColColumnOption_07 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_01.top - Grid_Col_Span_GridColColumnOption_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_02.top - Grid_Col_Span_GridColColumnOption_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_03.top - Grid_Col_Span_GridColColumnOption_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_04.top - Grid_Col_Span_GridColColumnOption_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_05.top - Grid_Col_Span_GridColColumnOption_04.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_06.top - Grid_Col_Span_GridColColumnOption_05.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_07.top - Grid_Col_Span_GridColColumnOption_06.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0400] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0500
+     * @tc.name      testGridColSpan
+     * @tc.desc      Set the width of Column to 220vp
+     */
+    it('SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0500', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0500] START');
+      globalThis.value.message.notify({name:'addWidth', value:'230vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Span_GridColColumnOption_00 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_00');
+      let Grid_Col_Span_GridColColumnOption_01 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_01');
+      let Grid_Col_Span_GridColColumnOption_02 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_02');
+      let Grid_Col_Span_GridColColumnOption_03 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_03');
+      let Grid_Col_Span_GridColColumnOption_04 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_04');
+      let Grid_Col_Span_GridColColumnOption_05 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_05');
+      let Grid_Col_Span_GridColColumnOption_06 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_06');
+      let Grid_Col_Span_GridColColumnOption_07 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_01.top - Grid_Col_Span_GridColColumnOption_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_02.top - Grid_Col_Span_GridColColumnOption_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_03.top - Grid_Col_Span_GridColColumnOption_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_04.top - Grid_Col_Span_GridColColumnOption_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_05.top - Grid_Col_Span_GridColColumnOption_04.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_06.top - Grid_Col_Span_GridColColumnOption_05.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_07.top - Grid_Col_Span_GridColColumnOption_06.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0500] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0600
+     * @tc.name      testGridColSpan
+     * @tc.desc      Set the width of Column to 320vp
+     */
+    it('SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0600', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0600] START');
+      globalThis.value.message.notify({name:'addWidth', value:'330vp'});
+
+      await CommonFunc.sleep(3000);
+
+
+      console.log('get Initial value')
+      let Grid_Col_Span_GridColColumnOption_00 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_00');
+      let Grid_Col_Span_GridColColumnOption_01 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_01');
+      let Grid_Col_Span_GridColColumnOption_02 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_02');
+      let Grid_Col_Span_GridColColumnOption_03 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_03');
+      let Grid_Col_Span_GridColColumnOption_04 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_04');
+      let Grid_Col_Span_GridColColumnOption_05 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_05');
+      let Grid_Col_Span_GridColColumnOption_06 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_06');
+      let Grid_Col_Span_GridColColumnOption_07 = CommonFunc.getComponentRect('Grid_Col_Span_GridColColumnOption_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_01.top - Grid_Col_Span_GridColColumnOption_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_02.top - Grid_Col_Span_GridColColumnOption_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_03.top - Grid_Col_Span_GridColColumnOption_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_04.top - Grid_Col_Span_GridColColumnOption_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_05.top - Grid_Col_Span_GridColColumnOption_04.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_06.top - Grid_Col_Span_GridColColumnOption_05.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_GridColColumnOption_07.top - Grid_Col_Span_GridColColumnOption_06.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Span_GridColColumnOption_TEST_0600] END');
+      done();
+    });
+  })
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Col/Grid_Col_Span/Grid_Col_Span_Number.test.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+import {MessageManager,Callback} from '../../../../MainAbility/common/MessageManager';
+
+export default function Grid_Col_Span_Number() {
+  describe('Grid_Col_Span_Number', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Col_Span_Number beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Col/Grid_Col_Span/Grid_Col_Span_Number",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Col_Span_Number state pages:" + JSON.stringify(pages));
+        if (!("Grid_Col_Span_Number" == pages.name)) {
+          console.info("get Grid_Col_Span_Number pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Col_Span_Number page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Col_Span_Number page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Col_Span_Number after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Span_Number_TEST_0100
+     * @tc.name      testGridColSpan
+     * @tc.desc      GridCol set span to -2
+     */
+    it('SUB_ACE_Grid_Col_Span_Number_TEST_0100', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Span_Number_TEST_0100] START');
+      globalThis.value.message.notify({name:'addSpan', value:-2});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Span_Number_00 = CommonFunc.getComponentRect('Grid_Col_Span_Number_00');
+      let Grid_Col_Span_Number_01 = CommonFunc.getComponentRect('Grid_Col_Span_Number_01');
+      let Grid_Col_Span_Number_02 = CommonFunc.getComponentRect('Grid_Col_Span_Number_02');
+      let Grid_Col_Span_Number_03 = CommonFunc.getComponentRect('Grid_Col_Span_Number_03');
+      let Grid_Col_Span_Number_04 = CommonFunc.getComponentRect('Grid_Col_Span_Number_04');
+      let Grid_Col_Span_Number_05 = CommonFunc.getComponentRect('Grid_Col_Span_Number_05');
+      let Grid_Col_Span_Number_06 = CommonFunc.getComponentRect('Grid_Col_Span_Number_06');
+      let Grid_Col_Span_Number_07 = CommonFunc.getComponentRect('Grid_Col_Span_Number_07');
+
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Span_Number_01.left - Grid_Col_Span_Number_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_02.left - Grid_Col_Span_Number_01.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_03.left - Grid_Col_Span_Number_02.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_04.left - Grid_Col_Span_Number_03.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_05.left - Grid_Col_Span_Number_04.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_06.top - Grid_Col_Span_Number_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_07.top - Grid_Col_Span_Number_01.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Span_Number_TEST_0100] END');
+      done();
+    });
+
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Span_Number_TEST_0200
+     * @tc.name      testGridColSpan
+     * @tc.desc      GridCol set span to 0
+     */
+    it('SUB_ACE_Grid_Col_Span_Number_TEST_0200', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Span_Number_TEST_0200] START');
+      globalThis.value.message.notify({name:'addSpan', value:0});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Span_Number_00 = CommonFunc.getComponentRect('Grid_Col_Span_Number_00');
+      let Grid_Col_Span_Number_01 = CommonFunc.getComponentRect('Grid_Col_Span_Number_01');
+      let Grid_Col_Span_Number_02 = CommonFunc.getComponentRect('Grid_Col_Span_Number_02');
+      let Grid_Col_Span_Number_03 = CommonFunc.getComponentRect('Grid_Col_Span_Number_03');
+      let Grid_Col_Span_Number_04 = CommonFunc.getComponentRect('Grid_Col_Span_Number_04');
+      let Grid_Col_Span_Number_05 = CommonFunc.getComponentRect('Grid_Col_Span_Number_05');
+      let Grid_Col_Span_Number_06 = CommonFunc.getComponentRect('Grid_Col_Span_Number_06');
+      let Grid_Col_Span_Number_07 = CommonFunc.getComponentRect('Grid_Col_Span_Number_07');
+
+      console.info('[SUB_ACE_Grid_Col_Span_Number_TEST_0200] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Span_Number_TEST_0300
+     * @tc.name      testGridColSpan
+     * @tc.desc      GridCol set span to 2
+     */
+    it('SUB_ACE_Grid_Col_Span_Number_TEST_0300', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Span_Number_TEST_0300] START');
+      globalThis.value.message.notify({name:'addSpan', value:2});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Span_Number_00 = CommonFunc.getComponentRect('Grid_Col_Span_Number_00');
+      let Grid_Col_Span_Number_01 = CommonFunc.getComponentRect('Grid_Col_Span_Number_01');
+      let Grid_Col_Span_Number_02 = CommonFunc.getComponentRect('Grid_Col_Span_Number_02');
+      let Grid_Col_Span_Number_03 = CommonFunc.getComponentRect('Grid_Col_Span_Number_03');
+      let Grid_Col_Span_Number_04 = CommonFunc.getComponentRect('Grid_Col_Span_Number_04');
+      let Grid_Col_Span_Number_05 = CommonFunc.getComponentRect('Grid_Col_Span_Number_05');
+      let Grid_Col_Span_Number_06 = CommonFunc.getComponentRect('Grid_Col_Span_Number_06');
+      let Grid_Col_Span_Number_07 = CommonFunc.getComponentRect('Grid_Col_Span_Number_07');
+
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Span_Number_01.left - Grid_Col_Span_Number_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_02.left - Grid_Col_Span_Number_01.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Span_Number_04.left - Grid_Col_Span_Number_03.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_05.left - Grid_Col_Span_Number_04.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Span_Number_07.left - Grid_Col_Span_Number_06.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Col_Span_Number_03.top - Grid_Col_Span_Number_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_04.top - Grid_Col_Span_Number_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_05.top - Grid_Col_Span_Number_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_06.top - Grid_Col_Span_Number_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_07.top - Grid_Col_Span_Number_04.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Span_Number_TEST_0300] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Col_Span_Number_TEST_0400
+     * @tc.name      testGridColSpan
+     * @tc.desc      GridCol set span to 8
+     */
+    it('SUB_ACE_Grid_Col_Span_Number_TEST_0400', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Col_Span_Number_TEST_0400] START');
+      globalThis.value.message.notify({name:'addSpan', value:8});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Col_Span_Number_00 = CommonFunc.getComponentRect('Grid_Col_Span_Number_00');
+      let Grid_Col_Span_Number_01 = CommonFunc.getComponentRect('Grid_Col_Span_Number_01');
+      let Grid_Col_Span_Number_02 = CommonFunc.getComponentRect('Grid_Col_Span_Number_02');
+      let Grid_Col_Span_Number_03 = CommonFunc.getComponentRect('Grid_Col_Span_Number_03');
+      let Grid_Col_Span_Number_04 = CommonFunc.getComponentRect('Grid_Col_Span_Number_04');
+      let Grid_Col_Span_Number_05 = CommonFunc.getComponentRect('Grid_Col_Span_Number_05');
+      let Grid_Col_Span_Number_06 = CommonFunc.getComponentRect('Grid_Col_Span_Number_06');
+      let Grid_Col_Span_Number_07 = CommonFunc.getComponentRect('Grid_Col_Span_Number_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Col_Span_Number_01.top - Grid_Col_Span_Number_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_02.top - Grid_Col_Span_Number_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_03.top - Grid_Col_Span_Number_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_04.top - Grid_Col_Span_Number_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_05.top - Grid_Col_Span_Number_04.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_06.top - Grid_Col_Span_Number_05.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Col_Span_Number_07.top - Grid_Col_Span_Number_06.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Col_Span_Number_TEST_0400] END');
+      done();
+    });
+  })
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Change.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Grid_Row_Breakpoints_Change() {
+  describe('Grid_Row_Breakpoints_Change', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Breakpoints_Change beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Change",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Breakpoints_Change state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Breakpoints_Change" == pages.name)) {
+          console.info("get Grid_Row_Breakpoints_Change pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Breakpoints_Change page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Breakpoints_Change page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Grid_Row_Breakpoints_Change beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Breakpoints_Change after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWBREAKPOTINS_Value_0100
+     * @tc.name      testBreakpoints
+     * @tc.desc      Set the Breakpoints of GridRow to '50vp'
+     */
+    it('SUB_ACE_GridRowBreakpoints_Value_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowBreakpoints_Value_0100 START');
+      globalThis.value.message.notify({ name:'width', value:'50vp' })
+      await CommonFunc.sleep(2000)
+
+      let firstBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Change0');
+      let secondBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Change1');
+      let thirdBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Change2');
+
+      expect(Math.round(secondBreakpoints.top - firstBreakpoints.bottom)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(thirdBreakpoints.top - secondBreakpoints.bottom)).assertEqual(Math.round(vp2px(5)));
+
+      console.info('SUB_ACE_GridRowBreakpoints_Value_0100 END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWBREAKPOTINS_Value_0200
+     * @tc.name      testBreakpoints
+     * @tc.desc      Set the Breakpoints of GridRow to '150vp'
+     */
+    it('SUB_ACE_GridRowBreakpoints_Value_0200', 0, async function (done) {
+      console.info('SUB_ACE_GridRowBreakpoints_Value_0200 START');
+      globalThis.value.message.notify({ name:'width', value:'150vp' })
+      await CommonFunc.sleep(2000)
+
+      let firstBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Change0');
+      let secondBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Change1');
+      let thirdBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Change2');
+
+      expect(Math.round(secondBreakpoints.left - firstBreakpoints.right)).assertEqual(Math.round(vp2px(10)));
+      expect(Math.round(thirdBreakpoints.top - firstBreakpoints.bottom)).assertEqual(Math.round(vp2px(10)));
+
+      console.info('SUB_ACE_GridRowBreakpoints_Value_0200 END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWBREAKPOTINS_Value_0300
+     * @tc.name      testBreakpoints
+     * @tc.desc      Set the Breakpoints of GridRow to '300vp'
+     */
+    it('SUB_ACE_GridRowBreakpoints_Value_0300', 0, async function (done) {
+      console.info('SUB_ACE_GridRowBreakpoints_Value_0300 START');
+      globalThis.value.message.notify({ name:'width', value:'300vp' })
+      await CommonFunc.sleep(2000)
+
+      let firstBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Change0');
+      let secondBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Change1');
+      let thirdBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Change2');
+      let fourthBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Change3');
+      let fifthBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Change4');
+
+      expect(Math.round(secondBreakpoints.left - firstBreakpoints.right)).assertEqual(Math.round(vp2px(15)));
+      expect(Math.round(thirdBreakpoints.left - secondBreakpoints.right)).assertEqual(Math.round(vp2px(15)));
+      expect(Math.round(fourthBreakpoints.top - firstBreakpoints.bottom)).assertEqual(Math.round(vp2px(15)));
+      expect(Math.round(fifthBreakpoints.top - secondBreakpoints.bottom)).assertEqual(Math.round(vp2px(15)));
+
+      console.info('SUB_ACE_GridRowBreakpoints_Value_0300 END');
+      done();
+    });
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Component.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Grid_Row_Breakpoints_Component() {
+  describe('Grid_Row_Breakpoints_Component', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Breakpoints_Component beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Component",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Breakpoints_Component state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Breakpoints_Component" == pages.name)) {
+          console.info("get Grid_Row_Breakpoints_Component pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Breakpoints_Component page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Breakpoints_Component page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Grid_Row_Breakpoints_Component beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Breakpoints_Component after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWBREAKPOTINS_0100
+     * @tc.name      testBreakpoints
+     * @tc.desc      Set the reference to ComponentSize
+     */
+    it('SUB_ACE_GridRowBreakpoints_Component_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowBreakpoints_Component_0100 START');
+      await CommonFunc.sleep(2000)
+
+      let firstBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Component0');
+      let secondBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Component1');
+      let thirdBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Component2');
+      let fourthBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Component3');
+      let fifthBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Component4');
+
+      expect(Math.round(secondBreakpoints.left - firstBreakpoints.right)).assertEqual(vp2px(20));
+      expect(Math.round(thirdBreakpoints.left - secondBreakpoints.right)).assertEqual(vp2px(20));
+      expect(Math.round(fourthBreakpoints.left - thirdBreakpoints.right)).assertEqual(vp2px(20));
+      expect(Math.round(fifthBreakpoints.top - firstBreakpoints.bottom)).assertEqual(vp2px(20));
+
+      console.info('SUB_ACE_GridRowBreakpoints_Component_0100 END');
+      done();
+    });
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Default.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Grid_Row_Breakpoints_Default() {
+  describe('Grid_Row_Breakpoints_Default', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Breakpoints_Default beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Default",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Breakpoints_Default state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Breakpoints_Default" == pages.name)) {
+          console.info("get Grid_Row_Breakpoints_Default pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Breakpoints_Default page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Breakpoints_Default page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Grid_Row_Breakpoints_Default beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Breakpoints_Default after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWBREAKPOTINS_Default_0100
+     * @tc.name      testBreakpoints
+     * @tc.desc      Set the Breakpoints of GridRow to '300vp'
+     */
+    it('SUB_ACE_GridRowBreakpoints_Default_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowBreakpoints_Default_0100 START');
+      globalThis.value.message.notify({ name:'width', value:'300vp' })
+      await CommonFunc.sleep(2000)
+
+      let firstBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Default0');
+      let secondBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Default1');
+      let thirdBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Default2');
+
+      expect(Math.round(secondBreakpoints.top - firstBreakpoints.bottom)).assertEqual(Math.round(vp2px(5)));
+
+      console.info('SUB_ACE_GridRowBreakpoints_Default_0100 END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWBREAKPOTINS_Default_0200
+     * @tc.name      testBreakpoints
+     * @tc.desc      Set the Breakpoints of GridRow to default
+     */
+    it('SUB_ACE_GridRowBreakpoints_Default_0200', 0, async function (done) {
+      console.info('SUB_ACE_GridRowBreakpoints_Default_0200 START');
+      globalThis.value.message.notify({ name:'width', value:'350vp' })
+      await CommonFunc.sleep(2000)
+
+      let firstBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Default0');
+      let secondBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Default1');
+      let thirdBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Default2');
+
+      expect(Math.round(secondBreakpoints.left - firstBreakpoints.right)).assertEqual(Math.round(vp2px(10)));
+      expect(Math.round(thirdBreakpoints.top - firstBreakpoints.bottom)).assertEqual(Math.round(vp2px(10)));
+
+      console.info('SUB_ACE_GridRowBreakpoints_Default_0200 END');
+      done();
+    });
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Incremental.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function GridRowBreakpoints_Value1() {
+  describe('Grid_Row_Breakpoints_Incremental', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Breakpoints_Incremental beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Incremental",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Breakpoints_Incremental state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Breakpoints_Incremental" == pages.name)) {
+          console.info("get Grid_Row_Breakpoints_Incremental pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Breakpoints_Incremental page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Breakpoints_Incremental page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Grid_Row_Breakpoints_Incremental beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("GridRowBreakpoints_Value1 after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWBREAKPOTINS_0100
+     * @tc.name      testBreakpoints
+     * @tc.desc      The breakpoint range value monotonically increases
+     */
+    it('SUB_ACE_GridRowBreakpoints_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowBreakpoints_0100 START');
+      await CommonFunc.sleep(2000)
+
+      let firstBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Incremental0');
+      let secondBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Incremental1');
+      let thirdBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Incremental2');
+      let fourthBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Incremental3');
+      let fifthBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Incremental4');
+
+      expect(Math.round(secondBreakpoints.left - firstBreakpoints.right)).assertEqual(Math.round(vp2px(20)));
+      expect(Math.round(thirdBreakpoints.left - secondBreakpoints.right)).assertEqual(Math.round(vp2px(20)));
+      expect(Math.round(fourthBreakpoints.left - thirdBreakpoints.right)).assertEqual(Math.round(vp2px(20)));
+      expect(Math.round(fifthBreakpoints.top - firstBreakpoints.bottom)).assertEqual(Math.round(vp2px(20)));
+      console.info('SUB_ACE_GridRowBreakpoints_0100 END');
+      done();
+    });
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Negative.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Grid_Row_Breakpoints_Negative() {
+  describe('Grid_Row_Breakpoints_Negative', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Breakpoints_Negative beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Negative",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Breakpoints_Negative state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Breakpoints_Negative" == pages.name)) {
+          console.info("get Grid_Row_Breakpoints_Negative pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Breakpoints_Negative page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Breakpoints_Negative page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Grid_Row_Breakpoints_Negative beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Breakpoints_Negative after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWBREAKPOTINS_Negative_0100
+     * @tc.name      testBreakpoints
+     * @tc.desc      The breakpoint range value cannot be negative
+     */
+    it('SUB_ACE_GridRowBreakpoints_Negative_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowBreakpoints_Negative_0100 START');
+      await CommonFunc.sleep(2000)
+
+      let firstBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Negative0');
+      let secondBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Negative1');
+      let thirdBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Negative2');
+      let fourthBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Negative3');
+      let fifthBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Negative4');
+
+      expect(Math.round(secondBreakpoints.top - firstBreakpoints.bottom)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(thirdBreakpoints.top - secondBreakpoints.bottom)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(fourthBreakpoints.top - thirdBreakpoints.bottom)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(fifthBreakpoints.top - fourthBreakpoints.bottom)).assertEqual(Math.round(vp2px(5)));
+      console.info('SUB_ACE_GridRowBreakpoints_Negative_0100 END');
+      done();
+    });
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Quantity.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Grid_Row_Breakpoints_Quantity() {
+  describe('Grid_Row_Breakpoints_Quantity', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Breakpoints_Quantity beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Quantity",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Breakpoints_Quantity state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Breakpoints_Quantity" == pages.name)) {
+          console.info("get Grid_Row_Breakpoints_Quantity pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Breakpoints_Quantity page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Breakpoints_Quantity page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Grid_Row_Breakpoints_Quantity beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Breakpoints_Quantity after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWBREAKPOTINS_0100
+     * @tc.name      testBreakpoints
+     * @tc.desc      The number of breakpoint ranges cannot exceed the number of values that can be taken
+     */
+    it('SUB_ACE_GridRowBreakpoints_Quantity_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowBreakpoints_Quantity_0100 START');
+      await CommonFunc.sleep(2000)
+
+      let firstBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Quantity0');
+      let secondBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Quantity1');
+      let thirdBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Quantity2');
+      let fourthBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Quantity3');
+      let fifthBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Quantity4');
+
+      expect(Math.round(secondBreakpoints.top - firstBreakpoints.bottom)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(thirdBreakpoints.top - secondBreakpoints.bottom)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(fourthBreakpoints.top - thirdBreakpoints.bottom)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(fifthBreakpoints.top - fourthBreakpoints.bottom)).assertEqual(Math.round(vp2px(5)));
+      console.info('SUB_ACE_GridRowBreakpoints_Quantity_0100 END');
+      done();
+    });
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Window.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Grid_Row_Breakpoints_Window() {
+  describe('Grid_Row_Breakpoints_Window', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Breakpoints_Window beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Breakpoints/Grid_Row_Breakpoints_Window",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Breakpoints_Window state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Breakpoints_Window" == pages.name)) {
+          console.info("get Grid_Row_Breakpoints_Window pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Breakpoints_Window page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Breakpoints_Window page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Grid_Row_Breakpoints_Window beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Breakpoints_Window after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWBREAKPOTINS_Window_0100
+     * @tc.name      testBreakpoints
+     * @tc.desc      Set the reference to ComponentSize
+     */
+    it('SUB_ACE_GRIDROWBREAKPOTINS_Window_0100', 0, async function (done) {
+      console.info('SUB_ACE_GRIDROWBREAKPOTINS_Window_0100 START');
+      await CommonFunc.sleep(2000)
+
+      let firstBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Window0');
+      let secondBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Window1');
+      let thirdBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Window2');
+      let fourthBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Window3');
+      let fifthBreakpoints = CommonFunc.getComponentRect('Grid_Row_Breakpoints_Window4');
+
+      expect(Math.round(secondBreakpoints.left - firstBreakpoints.right)).assertEqual(Math.round(thirdBreakpoints.left - secondBreakpoints.right));
+      expect(Math.round(thirdBreakpoints.left - secondBreakpoints.right)).assertEqual(Math.round(fourthBreakpoints.left - thirdBreakpoints.right));
+      expect(Math.round(fourthBreakpoints.left - thirdBreakpoints.right)).assertEqual(Math.round(thirdBreakpoints.left - secondBreakpoints.right));
+
+      console.info('SUB_ACE_GRIDROWBREAKPOTINS_Window_0100 END');
+      done();
+    });
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Columns/Grid_Row_Columns.test.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+import {MessageManager,Callback} from '../../../../MainAbility/common/MessageManager';
+
+export default function Grid_Row_Columns() {
+  describe('Grid_Row_Columns', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Columns beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Columns/Grid_Row_Columns",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Columns state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Columns" == pages.name)) {
+          console.info("get Grid_Row_Columns pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Columns page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Columns page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Columns after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Row_Columns_TEST_0100
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to -2
+     */
+    it('SUB_ACE_Grid_Row_Columns_TEST_0100', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Row_Columns_TEST_0100] START');
+      globalThis.value.message.notify({name:'addWidth', value:'40vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Row_Columns_00 = CommonFunc.getComponentRect('Grid_Row_Columns_00');
+      let Grid_Row_Columns_01 = CommonFunc.getComponentRect('Grid_Row_Columns_01');
+      let Grid_Row_Columns_02 = CommonFunc.getComponentRect('Grid_Row_Columns_02');
+      let Grid_Row_Columns_03 = CommonFunc.getComponentRect('Grid_Row_Columns_03');
+      let Grid_Row_Columns_04 = CommonFunc.getComponentRect('Grid_Row_Columns_04');
+      let Grid_Row_Columns_05 = CommonFunc.getComponentRect('Grid_Row_Columns_05');
+      let Grid_Row_Columns_06 = CommonFunc.getComponentRect('Grid_Row_Columns_06');
+      let Grid_Row_Columns_07 = CommonFunc.getComponentRect('Grid_Row_Columns_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Row_Columns_01.top - Grid_Row_Columns_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_02.top - Grid_Row_Columns_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_03.top - Grid_Row_Columns_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_04.top - Grid_Row_Columns_03.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_05.top - Grid_Row_Columns_04.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_06.top - Grid_Row_Columns_05.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_07.top - Grid_Row_Columns_06.bottom)).assertEqual(vp2px(10));
+
+
+      console.info('[SUB_ACE_Grid_Row_Columns_TEST_0100] END');
+      done();
+    });
+
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Row_Columns_TEST_0200
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to 0
+     */
+    it('SUB_ACE_Grid_Row_Columns_TEST_0200', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Row_Columns_TEST_0200] START');
+      globalThis.value.message.notify({name:'addWidth', value:'80vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Row_Columns_00 = CommonFunc.getComponentRect('Grid_Row_Columns_00');
+      let Grid_Row_Columns_01 = CommonFunc.getComponentRect('Grid_Row_Columns_01');
+      let Grid_Row_Columns_02 = CommonFunc.getComponentRect('Grid_Row_Columns_02');
+      let Grid_Row_Columns_03 = CommonFunc.getComponentRect('Grid_Row_Columns_03');
+      let Grid_Row_Columns_04 = CommonFunc.getComponentRect('Grid_Row_Columns_04');
+      let Grid_Row_Columns_05 = CommonFunc.getComponentRect('Grid_Row_Columns_05');
+      let Grid_Row_Columns_06 = CommonFunc.getComponentRect('Grid_Row_Columns_06');
+      let Grid_Row_Columns_07 = CommonFunc.getComponentRect('Grid_Row_Columns_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Row_Columns_01.left - Grid_Row_Columns_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_03.left - Grid_Row_Columns_02.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_05.left - Grid_Row_Columns_04.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_07.left - Grid_Row_Columns_06.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Row_Columns_02.top - Grid_Row_Columns_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_03.top - Grid_Row_Columns_01.bottom)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Row_Columns_04.top - Grid_Row_Columns_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_05.top - Grid_Row_Columns_03.bottom)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Row_Columns_06.top - Grid_Row_Columns_04.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_07.top - Grid_Row_Columns_05.bottom)).assertEqual(vp2px(10));
+
+
+      console.info('[SUB_ACE_Grid_Row_Columns_TEST_0200] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Row_Columns_TEST_0300
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to 0
+     */
+    it('SUB_ACE_Grid_Row_Columns_TEST_0300', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Row_Columns_TEST_0300] START');
+      globalThis.value.message.notify({name:'addWidth', value:'120vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Row_Columns_00 = CommonFunc.getComponentRect('Grid_Row_Columns_00');
+      let Grid_Row_Columns_01 = CommonFunc.getComponentRect('Grid_Row_Columns_01');
+      let Grid_Row_Columns_02 = CommonFunc.getComponentRect('Grid_Row_Columns_02');
+      let Grid_Row_Columns_03 = CommonFunc.getComponentRect('Grid_Row_Columns_03');
+      let Grid_Row_Columns_04 = CommonFunc.getComponentRect('Grid_Row_Columns_04');
+      let Grid_Row_Columns_05 = CommonFunc.getComponentRect('Grid_Row_Columns_05');
+      let Grid_Row_Columns_06 = CommonFunc.getComponentRect('Grid_Row_Columns_06');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Row_Columns_01.left - Grid_Row_Columns_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_02.left - Grid_Row_Columns_01.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_04.left - Grid_Row_Columns_03.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_05.left - Grid_Row_Columns_04.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Row_Columns_03.top - Grid_Row_Columns_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_04.top - Grid_Row_Columns_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_05.top - Grid_Row_Columns_02.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Row_Columns_TEST_0300] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Row_Columns_TEST_0400
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to 0
+     */
+    it('SUB_ACE_Grid_Row_Columns_TEST_0400', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Row_Columns_TEST_0400] START');
+      globalThis.value.message.notify({name:'addWidth', value:'170vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Row_Columns_00 = CommonFunc.getComponentRect('Grid_Row_Columns_00');
+      let Grid_Row_Columns_01 = CommonFunc.getComponentRect('Grid_Row_Columns_01');
+      let Grid_Row_Columns_02 = CommonFunc.getComponentRect('Grid_Row_Columns_02');
+      let Grid_Row_Columns_03 = CommonFunc.getComponentRect('Grid_Row_Columns_03');
+      let Grid_Row_Columns_04 = CommonFunc.getComponentRect('Grid_Row_Columns_04');
+      let Grid_Row_Columns_05 = CommonFunc.getComponentRect('Grid_Row_Columns_05');
+      let Grid_Row_Columns_06 = CommonFunc.getComponentRect('Grid_Row_Columns_06');
+      let Grid_Row_Columns_07 = CommonFunc.getComponentRect('Grid_Row_Columns_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Row_Columns_01.left - Grid_Row_Columns_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_02.left - Grid_Row_Columns_01.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_03.left - Grid_Row_Columns_02.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_05.left - Grid_Row_Columns_04.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_06.left - Grid_Row_Columns_05.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_07.left - Grid_Row_Columns_06.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Row_Columns_04.top - Grid_Row_Columns_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_05.top - Grid_Row_Columns_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_06.top - Grid_Row_Columns_02.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_07.top - Grid_Row_Columns_03.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Row_Columns_TEST_0400] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Row_Columns_TEST_0500
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to 0
+     */
+    it('SUB_ACE_Grid_Row_Columns_TEST_0500', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Row_Columns_TEST_0500] START');
+      globalThis.value.message.notify({name:'addWidth', value:'220vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Row_Columns_00 = CommonFunc.getComponentRect('Grid_Row_Columns_00');
+      let Grid_Row_Columns_01 = CommonFunc.getComponentRect('Grid_Row_Columns_01');
+      let Grid_Row_Columns_02 = CommonFunc.getComponentRect('Grid_Row_Columns_02');
+      let Grid_Row_Columns_03 = CommonFunc.getComponentRect('Grid_Row_Columns_03');
+      let Grid_Row_Columns_04 = CommonFunc.getComponentRect('Grid_Row_Columns_04');
+      let Grid_Row_Columns_05 = CommonFunc.getComponentRect('Grid_Row_Columns_05');
+      let Grid_Row_Columns_06 = CommonFunc.getComponentRect('Grid_Row_Columns_06');
+      let Grid_Row_Columns_07 = CommonFunc.getComponentRect('Grid_Row_Columns_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Row_Columns_01.left - Grid_Row_Columns_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_02.left - Grid_Row_Columns_01.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_03.left - Grid_Row_Columns_02.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_04.left - Grid_Row_Columns_03.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_06.left - Grid_Row_Columns_05.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_07.left - Grid_Row_Columns_06.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Row_Columns_05.top - Grid_Row_Columns_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_06.top - Grid_Row_Columns_01.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_07.top - Grid_Row_Columns_02.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Row_Columns_TEST_0500] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Row_Columns_TEST_0600
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to 0
+     */
+    it('SUB_ACE_Grid_Row_Columns_TEST_0600', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Row_Columns_TEST_0600] START');
+      globalThis.value.message.notify({name:'addWidth', value:'320vp'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Row_Columns_00 = CommonFunc.getComponentRect('Grid_Row_Columns_00');
+      let Grid_Row_Columns_01 = CommonFunc.getComponentRect('Grid_Row_Columns_01');
+      let Grid_Row_Columns_02 = CommonFunc.getComponentRect('Grid_Row_Columns_02');
+      let Grid_Row_Columns_03 = CommonFunc.getComponentRect('Grid_Row_Columns_03');
+      let Grid_Row_Columns_04 = CommonFunc.getComponentRect('Grid_Row_Columns_04');
+      let Grid_Row_Columns_05 = CommonFunc.getComponentRect('Grid_Row_Columns_05');
+      let Grid_Row_Columns_06 = CommonFunc.getComponentRect('Grid_Row_Columns_06');
+      let Grid_Row_Columns_07 = CommonFunc.getComponentRect('Grid_Row_Columns_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Row_Columns_01.left - Grid_Row_Columns_00.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_02.left - Grid_Row_Columns_01.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_03.left - Grid_Row_Columns_02.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_04.left - Grid_Row_Columns_03.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_05.left - Grid_Row_Columns_04.right)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_07.left - Grid_Row_Columns_06.right)).assertEqual(vp2px(10));
+
+      expect(Math.round(Grid_Row_Columns_06.top - Grid_Row_Columns_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Columns_07.top - Grid_Row_Columns_01.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Row_Columns_TEST_0600] END');
+      done();
+    });
+
+  })
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Columns/Grid_Row_Columns_Default.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Grid_Row_Columns_Default() {
+  describe('Grid_Row_Columns_Default', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Columns_Default beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Columns/Grid_Row_Columns_Default",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Columns_Default state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Columns_Default" == pages.name)) {
+          console.info("get Grid_Row_Columns_Default pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Columns_Default page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Columns_Default page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Grid_Row_Columns_Default beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Columns_Default after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWCOLUMNS_0100
+     * @tc.name      testGutterColumns
+     * @tc.desc      Set the Columns of GridRow to 12
+     */
+    it('SUB_ACE_GridRowColumns_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowColumns_0100 START');
+      await CommonFunc.sleep(2000)
+
+      let Columns_1 = CommonFunc.getComponentRect('GridRow_Columns_001');
+      let firstColumns = CommonFunc.getComponentRect('GridRow_Columns_0');
+      let secondColumns = CommonFunc.getComponentRect('GridRow_Columns_1');
+      let thirdColumns = CommonFunc.getComponentRect('GridRow_Columns_2');
+      let fourthColumns = CommonFunc.getComponentRect('GridRow_Columns_3');
+      let fifthColumns = CommonFunc.getComponentRect('GridRow_Columns_4');
+      let sixthColumns = CommonFunc.getComponentRect('GridRow_Columns_5');
+      let seventhColumns = CommonFunc.getComponentRect('GridRow_Columns_6');
+      let eighthColumns = CommonFunc.getComponentRect('GridRow_Columns_7');
+      let ninthColumns = CommonFunc.getComponentRect('GridRow_Columns_8');
+      let tenthColumns = CommonFunc.getComponentRect('GridRow_Columns_9');
+      let eleventhColumns = CommonFunc.getComponentRect('GridRow_Columns_10');
+      let twelfthColumns = CommonFunc.getComponentRect('GridRow_Columns_11');
+
+      let gridRowColumnsJson = getInspectorByKey('GridRow_Columns_001');
+      let gridRowColumns = JSON.parse(gridRowColumnsJson);
+      expect(gridRowColumns.$type).assertEqual('GridRow');
+
+      expect(firstColumns.top).assertEqual(Columns_1.top);
+      expect(secondColumns.top).assertEqual(Columns_1.top);
+      expect(thirdColumns.top).assertEqual(Columns_1.top);
+      expect(fourthColumns.top).assertEqual(Columns_1.top);
+      expect(fifthColumns.top).assertEqual(Columns_1.top);
+      expect(sixthColumns.top).assertEqual(Columns_1.top);
+      expect(seventhColumns.top).assertEqual(Columns_1.top);
+      expect(eighthColumns.top).assertEqual(Columns_1.top);
+      expect(ninthColumns.top).assertEqual(Columns_1.top);
+      expect(tenthColumns.top).assertEqual(Columns_1.top);
+      expect(eleventhColumns.top).assertEqual(Columns_1.top);
+      expect(twelfthColumns.top).assertEqual(Columns_1.top);
+
+      expect(firstColumns.left).assertEqual(Columns_1.left);
+
+      expect(Math.floor(secondColumns.left - firstColumns.right)).assertEqual(Math.floor(vp2px(5)));
+
+      console.info('SUB_ACE_GridRowColumns_0100 END');
+      done();
+    });
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Columns/Grid_Row_Columns_Option.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Grid_Row_Columns_Option() {
+  describe('Grid_Row_Columns_Option', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Columns_Option beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Columns/Grid_Row_Columns_Option",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Columns_Option state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Columns_Option" == pages.name)) {
+          console.info("get Grid_Row_Columns_Option pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Columns_Option page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Columns_Option page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Grid_Row_Columns_Option beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Columns_Option after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWCOLUMNS_Option_0100
+     * @tc.name      testGutterColumns
+     * @tc.desc      Set the Columns of GridRow to '30px'
+     */
+    it('SUB_ACE_GridRowColumns_Option_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowColumns_Option_0100 START');
+      globalThis.value.message.notify({ name:'option', value:'30' })
+      await CommonFunc.sleep(2000)
+
+      let firstColumns = CommonFunc.getComponentRect('GridRow_Columns_Option0');
+      let secondColumns = CommonFunc.getComponentRect('GridRow_Columns_Option1');
+      let gridRowColumnsJson = getInspectorByKey('GridRow_Columns_Option001');
+      let gridRowColumns = JSON.parse(gridRowColumnsJson);
+      expect(gridRowColumns.$type).assertEqual('GridRow');
+
+      expect(Math.round(secondColumns.top - firstColumns.bottom)).assertEqual(Math.round(vp2px(5)));
+
+      console.info('SUB_ACE_GridRowColumns_Option_0100 END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWCOLUMNS_Option_0200
+     * @tc.name      testGutterColumns
+     * @tc.desc      Set the Columns of GridRow to '70px'
+     */
+    it('SUB_ACE_GridRowColumns_Option_0200', 0, async function (done) {
+      console.info('SUB_ACE_GridRowColumns_Option_0200 START');
+      globalThis.value.message.notify({ name:'option', value:'70' })
+      await CommonFunc.sleep(2000)
+
+      let Columns_1 = CommonFunc.getComponentRect('GridRow_Columns_Option001');
+      let firstColumns = CommonFunc.getComponentRect('GridRow_Columns_Option0');
+      let secondColumns = CommonFunc.getComponentRect('GridRow_Columns_Option1');
+      let thirdColumns = CommonFunc.getComponentRect('GridRow_Columns_Option2');
+      let fourthColumns = CommonFunc.getComponentRect('GridRow_Columns_Option3');
+      let gridRowColumnsJson = getInspectorByKey('GridRow_Columns_Option001');
+      let gridRowColumns = JSON.parse(gridRowColumnsJson);
+      expect(gridRowColumns.$type).assertEqual('GridRow');
+
+
+      expect(Math.round(secondColumns.left - firstColumns.right)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(fourthColumns.left - thirdColumns.right)).assertEqual(Math.round(vp2px(5)));
+
+      console.info('SUB_ACE_GridRowColumns_Option_0200 END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWCOLUMNS_Option_0300
+     * @tc.name      testGutterColumns
+     * @tc.desc      Set the Columns of GridRow to '120px'
+     */
+    it('SUB_ACE_GridRowColumns_Option_0300', 0, async function (done) {
+      console.info('SUB_ACE_GridRowColumns_Option_0300 START');
+      globalThis.value.message.notify({ name:'option', value:'120' })
+      await CommonFunc.sleep(2000)
+
+      let Columns_1 = CommonFunc.getComponentRect('GridRow_Columns_Option001');
+      let firstColumns = CommonFunc.getComponentRect('GridRow_Columns_Option0');
+      let secondColumns = CommonFunc.getComponentRect('GridRow_Columns_Option1');
+      let thirdColumns = CommonFunc.getComponentRect('GridRow_Columns_Option2');
+      let fourthColumns = CommonFunc.getComponentRect('GridRow_Columns_Option3');
+      let fifthColumns = CommonFunc.getComponentRect('GridRow_Columns_Option4');
+      let gridRowColumnsJson = getInspectorByKey('GridRow_Columns_Option001');
+      let gridRowColumns = JSON.parse(gridRowColumnsJson);
+      expect(gridRowColumns.$type).assertEqual('GridRow');
+
+      expect(Math.round(secondColumns.left - firstColumns.right)).assertEqual(Math.round(thirdColumns.left - secondColumns.right));
+
+      expect(Math.round(secondColumns.left - firstColumns.right)).assertEqual(Math.round(vp2px(5)));
+
+      console.info('SUB_ACE_GridRowColumns_Option_0300 END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWCOLUMNS_Option_0400
+     * @tc.name      testGutterColumns
+     * @tc.desc      Set the Columns of GridRow to '170px'
+     */
+    it('SUB_ACE_GridRowColumns_Option_0400', 0, async function (done) {
+      console.info('SUB_ACE_GridRowColumns_Option_0400 START');
+      globalThis.value.message.notify({ name:'option', value:'170' })
+      await CommonFunc.sleep(2000)
+
+      let Columns_1 = CommonFunc.getComponentRect('GridRow_Columns_Option001');
+      let firstColumns = CommonFunc.getComponentRect('GridRow_Columns_Option0');
+      let secondColumns = CommonFunc.getComponentRect('GridRow_Columns_Option1');
+      let thirdColumns = CommonFunc.getComponentRect('GridRow_Columns_Option2');
+      let fourthColumns = CommonFunc.getComponentRect('GridRow_Columns_Option3');
+      let fifthColumns = CommonFunc.getComponentRect('GridRow_Columns_Option4');
+
+      let gridRowColumnsJson = getInspectorByKey('GridRow_Columns_Option001');
+      let gridRowColumns = JSON.parse(gridRowColumnsJson);
+      expect(gridRowColumns.$type).assertEqual('GridRow');
+
+      expect(Math.round(secondColumns.left - firstColumns.right)).assertEqual(Math.round(thirdColumns.left - secondColumns.right));
+      expect(Math.round(thirdColumns.left - secondColumns.right)).assertEqual(Math.round(fourthColumns.left - thirdColumns.right));
+      expect(Math.floor(secondColumns.left - firstColumns.right)).assertEqual(Math.floor(vp2px(5)));
+
+      console.info('SUB_ACE_GridRowColumns_Option_0400 END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWCOLUMNS_Option_0500
+     * @tc.name      testGutterColumns
+     * @tc.desc      Set the Columns of GridRow to '220px'
+     */
+    it('SUB_ACE_GridRowColumns_Option_0500', 0, async function (done) {
+      console.info('SUB_ACE_GridRowColumns_Option_0500 START');
+      globalThis.value.message.notify({ name:'option', value:'220' })
+      await CommonFunc.sleep(2000)
+
+      let Columns_1 = CommonFunc.getComponentRect('GridRow_Columns_Option001');
+      let firstColumns = CommonFunc.getComponentRect('GridRow_Columns_Option0');
+      let secondColumns = CommonFunc.getComponentRect('GridRow_Columns_Option1');
+      let thirdColumns = CommonFunc.getComponentRect('GridRow_Columns_Option2');
+      let fourthColumns = CommonFunc.getComponentRect('GridRow_Columns_Option3');
+      let fifthColumns = CommonFunc.getComponentRect('GridRow_Columns_Option4');
+      let gridRowColumnsJson = getInspectorByKey('GridRow_Columns_Option001');
+      let gridRowColumns = JSON.parse(gridRowColumnsJson);
+      expect(gridRowColumns.$type).assertEqual('GridRow');
+
+      expect(Math.round(secondColumns.left - firstColumns.right)).assertEqual(Math.round(thirdColumns.left - secondColumns.right));
+      expect(Math.round(thirdColumns.left - secondColumns.right)).assertEqual(Math.round(fourthColumns.left - thirdColumns.right));
+      expect(Math.round(fourthColumns.left - thirdColumns.right)).assertEqual(Math.round(fifthColumns.left - fourthColumns.right));
+      expect(Math.floor(secondColumns.left - firstColumns.right)).assertEqual(Math.floor(vp2px(5)));
+
+      console.info('SUB_ACE_GridRowColumns_Option_0500 END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWCOLUMNS_Option_0600
+     * @tc.name      testGutterColumns
+     * @tc.desc      Set the Columns of GridRow to '320px'
+     */
+    it('SUB_ACE_GridRowColumns_Option_0600', 0, async function (done) {
+      console.info('SUB_ACE_GridRowColumns_Option_0600 START');
+      globalThis.value.message.notify({ name:'option', value:'320' })
+      await CommonFunc.sleep(2000)
+
+      let Columns_1 = CommonFunc.getComponentRect('GridRow_Columns_Option001');
+      let firstColumns = CommonFunc.getComponentRect('GridRow_Columns_Option0');
+      let secondColumns = CommonFunc.getComponentRect('GridRow_Columns_Option1');
+      let thirdColumns = CommonFunc.getComponentRect('GridRow_Columns_Option2');
+      let fourthColumns = CommonFunc.getComponentRect('GridRow_Columns_Option3');
+      let fifthColumns = CommonFunc.getComponentRect('GridRow_Columns_Option4');
+      let sixthColumns = CommonFunc.getComponentRect('GridRow_Columns_Option5');
+      let gridRowColumnsJson = getInspectorByKey('GridRow_Columns_Option001');
+      let gridRowColumns = JSON.parse(gridRowColumnsJson);
+      expect(gridRowColumns.$type).assertEqual('GridRow');
+
+
+      expect(Math.round(secondColumns.left - firstColumns.right)).assertEqual(Math.round(thirdColumns.left - secondColumns.right));
+      expect(Math.round(thirdColumns.left - secondColumns.right)).assertEqual(Math.round(fourthColumns.left - thirdColumns.right));
+      expect(Math.round(fourthColumns.left - thirdColumns.right)).assertEqual(Math.round(fifthColumns.left - fourthColumns.right));
+      expect(Math.round(fifthColumns.left - fourthColumns.right)).assertEqual(Math.round(sixthColumns.left - fifthColumns.right));
+      expect(Math.floor(secondColumns.left - firstColumns.right)).assertEqual(Math.floor(vp2px(5)));
+
+      console.info('SUB_ACE_GridRowColumns_Option_0600 END');
+      done();
+    });
+
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Direction/Grid_Row_Direction_Row.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Grid_Row_Direction_Row() {
+  describe('Grid_Row_Direction_Row', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Direction_Row beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Direction/Grid_Row_Direction_Row",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Direction_Row state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Direction_Row" == pages.name)) {
+          console.info("get Grid_Row_Direction_Row pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Direction_Row page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Direction_Row page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Grid_Row_Direction_Row beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Direction_Row after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWDIRECTIONROW_0100
+     * @tc.name      testDirectionRow
+     * @tc.desc      Set the Direction of GridRow to Row
+     */
+    it('SUB_ACE_GridRowDirection_Row_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowDirection_Row_0100 START');
+
+      let DirectionRow_1 = CommonFunc.getComponentRect('DirectionRow_001');
+      let firstDirectionRow = CommonFunc.getComponentRect('DirectionRow_0');
+      let secondDirectionRow = CommonFunc.getComponentRect('DirectionRow_1');
+      let thirdDirectionRow = CommonFunc.getComponentRect('DirectionRow_2');
+      let gridRowDirectionRowJson = getInspectorByKey('DirectionRow_001');
+      let gridRowDirection = JSON.parse(gridRowDirectionRowJson);
+      expect(gridRowDirection.$type).assertEqual('GridRow');
+
+      expect(firstDirectionRow.top).assertEqual(DirectionRow_1.top);
+      expect(firstDirectionRow.left).assertEqual(DirectionRow_1.left);
+
+      expect(Math.round(secondDirectionRow.left - firstDirectionRow.right)).assertEqual(vp2px(10));
+      expect(Math.round(thirdDirectionRow.top - firstDirectionRow.bottom)).assertEqual(vp2px(10));
+
+      console.info('SUB_ACE_GridRowDirection_Row_0100 END');
+      done();
+    });
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Direction/Grid_Row_Direction_RowReverse.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Grid_Row_Direction_RowReverse() {
+  describe('Grid_Row_Direction_RowReverse', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Direction_RowReverse beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Direction/Grid_Row_Direction_RowReverse",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Direction_RowReverse state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Direction_RowReverse" == pages.name)) {
+          console.info("get Grid_Row_Direction_RowReverse pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Direction_RowReverse page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Direction_RowReverse page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Grid_Row_Direction_RowReverse beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Direction_RowReverse after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWDIRECTIONROWREVERSE_0100
+     * @tc.name      testDirectionRowReverse
+     * @tc.desc      Set the Direction of GridRow to RowReverse
+     */
+    it('SUB_ACE_GridRowDirection_RowReverse_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowDirection_RowReverse_0100 START');
+      await CommonFunc.sleep(2000)
+
+      let DirectionRowReverse_1 = CommonFunc.getComponentRect('DirectionRowReverse_001');
+      let firstDirectionRowReverse = CommonFunc.getComponentRect('DirectionRowReverse_0');
+      let secondDirectionRowReverse = CommonFunc.getComponentRect('DirectionRowReverse_1');
+      let thirdDirectionRowReverse = CommonFunc.getComponentRect('DirectionRowReverse_2');
+      let gridRowDirectionRowReverseJson = getInspectorByKey('DirectionRowReverse_001');
+      let gridRowDirection = JSON.parse(gridRowDirectionRowReverseJson);
+      expect(gridRowDirection.$type).assertEqual('GridRow');
+
+      expect(firstDirectionRowReverse.top).assertEqual(DirectionRowReverse_1.top);
+      expect(firstDirectionRowReverse.right).assertEqual(DirectionRowReverse_1.right);
+
+      expect(Math.round(firstDirectionRowReverse.left - secondDirectionRowReverse.right)).assertEqual(vp2px(10));
+      expect(Math.round(thirdDirectionRowReverse.top - firstDirectionRowReverse.bottom)).assertEqual(vp2px(10));
+
+      console.info('SUB_ACE_GridRowDirection_RowReverse_0100 END');
+      done();
+    });
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Gutter/Grid_Row_Default.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Gutter_Length_Default() {
+  describe('Gutter_Length_Default', function () {
+    beforeEach(async function (done) {
+      console.info("Gutter_Length_Default beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Gutter/Grid_Row_Default",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Gutter_Length_Default state pages:" + JSON.stringify(pages));
+        if (!("Gutter_Length_Default" == pages.name)) {
+          console.info("get Gutter_Length_Default pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Gutter_Length_Default page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Gutter_Length_Default page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Gutter_Length_Default beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Gutter_Length_Default after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWGUTTERLENGTH_DEFAULT_0100
+     * @tc.name      testGutterLengthDefault
+     * @tc.desc      Set the gutterLength of GridRow to 0
+     */
+    it('SUB_ACE_GridRowGutterLength_Default_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowGutterLength_Default_0100 START');
+      await CommonFunc.sleep(2000)
+
+      let LengthNoSet_1 = CommonFunc.getComponentRect('Length_NoChange001');
+      let firstLengthNoSet = CommonFunc.getComponentRect('Length_NoChange_0');
+      let secondLengthNoSet = CommonFunc.getComponentRect('Length_NoChange_1');
+      let gridRowGutterLengthStrJson = getInspectorByKey('Length_NoChange001');
+      let gridRowGutter = JSON.parse(gridRowGutterLengthStrJson);
+      expect(gridRowGutter.$type).assertEqual('GridRow');
+
+      expect(firstLengthNoSet.top).assertEqual(LengthNoSet_1.top);
+      expect(firstLengthNoSet.left).assertEqual(LengthNoSet_1.left);
+
+      expect(Math.round(secondLengthNoSet.top - firstLengthNoSet.bottom)).assertEqual(vp2px(0));
+
+      console.info('SUB_ACE_GridRowGutterLength_Default_0100 END');
+      done();
+    });
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Gutter/Grid_Row_Gutter.test.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+import {MessageManager,Callback} from '../../../../MainAbility/common/MessageManager';
+
+export default function Grid_Row_Gutter() {
+  describe('Grid_Row_Gutter', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Gutter beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Gutter/Grid_Row_Gutter",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Gutter state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Gutter" == pages.name)) {
+          console.info("get Grid_Row_Gutter pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Gutter page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Gutter page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Gutter after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Row_Gutter_TEST_0100
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to -2
+     */
+    it('SUB_ACE_Grid_Row_Gutter_TEST_0100', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Row_Gutter_TEST_0100] START');
+      globalThis.value.message.notify({name:'addLength', value:-10});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Row_Gutter_00 = CommonFunc.getComponentRect('Grid_Row_Gutter_00');
+      let Grid_Row_Gutter_01 = CommonFunc.getComponentRect('Grid_Row_Gutter_01');
+      let Grid_Row_Gutter_02 = CommonFunc.getComponentRect('Grid_Row_Gutter_02');
+      let Grid_Row_Gutter_03 = CommonFunc.getComponentRect('Grid_Row_Gutter_03');
+      let Grid_Row_Gutter_04 = CommonFunc.getComponentRect('Grid_Row_Gutter_04');
+      let Grid_Row_Gutter_05 = CommonFunc.getComponentRect('Grid_Row_Gutter_05');
+      let Grid_Row_Gutter_06 = CommonFunc.getComponentRect('Grid_Row_Gutter_06');
+      let Grid_Row_Gutter_07 = CommonFunc.getComponentRect('Grid_Row_Gutter_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Row_Gutter_01.left - Grid_Row_Gutter_00.right)).assertEqual(vp2px(-10));
+      expect(Math.round(Grid_Row_Gutter_02.left - Grid_Row_Gutter_01.right)).assertEqual(vp2px(-10));
+      expect(Math.round(Grid_Row_Gutter_03.left - Grid_Row_Gutter_02.right)).assertEqual(vp2px(-10));
+      expect(Math.round(Grid_Row_Gutter_04.left - Grid_Row_Gutter_03.right)).assertEqual(vp2px(-10));
+      expect(Math.round(Grid_Row_Gutter_05.left - Grid_Row_Gutter_04.right)).assertEqual(vp2px(-10));
+      expect(Math.round(Grid_Row_Gutter_07.left - Grid_Row_Gutter_06.right)).assertEqual(vp2px(-10));
+
+      expect(Math.round(Grid_Row_Gutter_06.top - Grid_Row_Gutter_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Gutter_07.top - Grid_Row_Gutter_01.bottom)).assertEqual(vp2px(10));
+
+
+      console.info('[SUB_ACE_Grid_Row_Gutter_TEST_0100] END');
+      done();
+    });
+
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Row_Gutter_TEST_0200
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to 0
+     */
+    it('SUB_ACE_Grid_Row_Gutter_TEST_0200', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Row_Gutter_TEST_0200] START');
+      globalThis.value.message.notify({name:'addLength', value:0});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Row_Gutter_00 = CommonFunc.getComponentRect('Grid_Row_Gutter_00');
+      let Grid_Row_Gutter_01 = CommonFunc.getComponentRect('Grid_Row_Gutter_01');
+      let Grid_Row_Gutter_02 = CommonFunc.getComponentRect('Grid_Row_Gutter_02');
+      let Grid_Row_Gutter_03 = CommonFunc.getComponentRect('Grid_Row_Gutter_03');
+      let Grid_Row_Gutter_04 = CommonFunc.getComponentRect('Grid_Row_Gutter_04');
+      let Grid_Row_Gutter_05 = CommonFunc.getComponentRect('Grid_Row_Gutter_05');
+      let Grid_Row_Gutter_06 = CommonFunc.getComponentRect('Grid_Row_Gutter_06');
+      let Grid_Row_Gutter_07 = CommonFunc.getComponentRect('Grid_Row_Gutter_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Row_Gutter_01.left - Grid_Row_Gutter_00.right)).assertEqual(Math.round(vp2px(0)));
+      expect(Math.round(Grid_Row_Gutter_02.left - Grid_Row_Gutter_01.right)).assertEqual(Math.round(vp2px(0)));
+      expect(Math.round(Grid_Row_Gutter_03.left - Grid_Row_Gutter_02.right)).assertEqual(Math.round(vp2px(0)));
+      expect(Math.round(Grid_Row_Gutter_04.left - Grid_Row_Gutter_03.right)).assertEqual(Math.round(vp2px(0)));
+      expect(Math.round(Grid_Row_Gutter_05.left - Grid_Row_Gutter_04.right)).assertEqual(Math.round(vp2px(0)));
+      expect(Math.round(Grid_Row_Gutter_07.left - Grid_Row_Gutter_06.right)).assertEqual(Math.round(vp2px(0)));
+
+      expect(Math.round(Grid_Row_Gutter_06.top - Grid_Row_Gutter_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Gutter_07.top - Grid_Row_Gutter_01.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Row_Gutter_TEST_0200] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Row_Gutter_TEST_0300
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to 0
+     */
+    it('SUB_ACE_Grid_Row_Gutter_TEST_0300', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Row_Gutter_TEST_0200] START');
+      globalThis.value.message.notify({name:'addLength', value:5});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Row_Gutter_00 = CommonFunc.getComponentRect('Grid_Row_Gutter_00');
+      let Grid_Row_Gutter_01 = CommonFunc.getComponentRect('Grid_Row_Gutter_01');
+      let Grid_Row_Gutter_02 = CommonFunc.getComponentRect('Grid_Row_Gutter_02');
+      let Grid_Row_Gutter_03 = CommonFunc.getComponentRect('Grid_Row_Gutter_03');
+      let Grid_Row_Gutter_04 = CommonFunc.getComponentRect('Grid_Row_Gutter_04');
+      let Grid_Row_Gutter_05 = CommonFunc.getComponentRect('Grid_Row_Gutter_05');
+      let Grid_Row_Gutter_06 = CommonFunc.getComponentRect('Grid_Row_Gutter_06');
+      let Grid_Row_Gutter_07 = CommonFunc.getComponentRect('Grid_Row_Gutter_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Row_Gutter_01.left - Grid_Row_Gutter_00.right)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(Grid_Row_Gutter_02.left - Grid_Row_Gutter_01.right)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(Grid_Row_Gutter_03.left - Grid_Row_Gutter_02.right)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(Grid_Row_Gutter_04.left - Grid_Row_Gutter_03.right)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(Grid_Row_Gutter_05.left - Grid_Row_Gutter_04.right)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(Grid_Row_Gutter_07.left - Grid_Row_Gutter_06.right)).assertEqual(Math.round(vp2px(5)));
+      expect(Math.round(Grid_Row_Gutter_06.top - Grid_Row_Gutter_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Gutter_07.top - Grid_Row_Gutter_01.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Row_Gutter_TEST_0300] END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Row_Gutter_TEST_0300
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to 0
+     */
+    it('SUB_ACE_Grid_Row_Gutter_TEST_0400', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Row_Gutter_TEST_0400] START');
+      globalThis.value.message.notify({name:'addLength', value:10});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Grid_Row_Gutter_00 = CommonFunc.getComponentRect('Grid_Row_Gutter_00');
+      let Grid_Row_Gutter_01 = CommonFunc.getComponentRect('Grid_Row_Gutter_01');
+      let Grid_Row_Gutter_02 = CommonFunc.getComponentRect('Grid_Row_Gutter_02');
+      let Grid_Row_Gutter_03 = CommonFunc.getComponentRect('Grid_Row_Gutter_03');
+      let Grid_Row_Gutter_04 = CommonFunc.getComponentRect('Grid_Row_Gutter_04');
+      let Grid_Row_Gutter_05 = CommonFunc.getComponentRect('Grid_Row_Gutter_05');
+      let Grid_Row_Gutter_06 = CommonFunc.getComponentRect('Grid_Row_Gutter_06');
+      let Grid_Row_Gutter_07 = CommonFunc.getComponentRect('Grid_Row_Gutter_07');
+
+      console.log('assert space')
+      expect(Math.round(Grid_Row_Gutter_01.left - Grid_Row_Gutter_00.right)).assertEqual(Math.round(vp2px(10)));
+      expect(Math.round(Grid_Row_Gutter_02.left - Grid_Row_Gutter_01.right)).assertEqual(Math.round(vp2px(10)));
+      expect(Math.round(Grid_Row_Gutter_03.left - Grid_Row_Gutter_02.right)).assertEqual(Math.round(vp2px(10)));
+      expect(Math.round(Grid_Row_Gutter_04.left - Grid_Row_Gutter_03.right)).assertEqual(Math.round(vp2px(10)));
+      expect(Math.round(Grid_Row_Gutter_05.left - Grid_Row_Gutter_04.right)).assertEqual(Math.round(vp2px(10)));
+      expect(Math.round(Grid_Row_Gutter_07.left - Grid_Row_Gutter_06.right)).assertEqual(Math.round(vp2px(10)));
+      expect(Math.round(Grid_Row_Gutter_06.top - Grid_Row_Gutter_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Grid_Row_Gutter_07.top - Grid_Row_Gutter_01.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Row_Gutter_TEST_0400] END');
+      done();
+    });
+
+  })
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Gutter/Grid_Row_Length_String.test.ets

+/**
+ * Copyright (c) 2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+import {MessageManager,Callback} from '../../../../MainAbility/common/MessageManager';
+
+export default function Grid_Row_Length_String() {
+  describe('Grid_Row_Length_String', function () {
+    beforeEach(async function (done) {
+      console.info("Grid_Row_Length_String beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Gutter/Grid_Row_Length_String",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_Length_String state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_Length_String" == pages.name)) {
+          console.info("get Grid_Row_Length_String pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_Length_String page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_Length_String page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_Length_String after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Row_GutterStr_TEST_0100
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to -2
+     */
+    it('SUB_ACE_Grid_Row_GutterStr_TEST_0100', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Row_GutterStr_TEST_0100] START');
+      globalThis.value.message.notify({name:'addLength', value:'30%'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Length_String_00 = CommonFunc.getComponentRect('Length_String_00');
+      let Length_String_01 = CommonFunc.getComponentRect('Length_String_01');
+      let Length_String_02 = CommonFunc.getComponentRect('Length_String_02');
+      let Length_String_03 = CommonFunc.getComponentRect('Length_String_03');
+      let Length_String_04 = CommonFunc.getComponentRect('Length_String_04');
+      let Length_String_05 = CommonFunc.getComponentRect('Length_String_05');
+      let Length_String_06 = CommonFunc.getComponentRect('Length_String_06');
+      let Length_String_07 = CommonFunc.getComponentRect('Length_String_07');
+
+      console.log('assert space')
+      expect(Math.round(Length_String_01.left - Length_String_00.right)).assertEqual(vp2px(0));
+      expect(Math.round(Length_String_02.left - Length_String_01.right)).assertEqual(vp2px(0));
+      expect(Math.round(Length_String_03.left - Length_String_02.right)).assertEqual(vp2px(0));
+      expect(Math.round(Length_String_04.left - Length_String_03.right)).assertEqual(vp2px(0));
+      expect(Math.round(Length_String_05.left - Length_String_04.right)).assertEqual(vp2px(0));
+      expect(Math.round(Length_String_07.left - Length_String_06.right)).assertEqual(vp2px(0));
+
+      expect(Math.round(Length_String_06.top - Length_String_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Length_String_07.top - Length_String_01.bottom)).assertEqual(vp2px(10));
+
+
+      console.info('[SUB_ACE_Grid_Row_GutterStr_TEST_0100] END');
+      done();
+    });
+
+
+    /**
+     * @tc.number    SUB_ACE_Grid_Row_GutterStr_TEST_0200
+     * @tc.name      testGridColOffset
+     * @tc.desc      GridCol set offset to 0
+     */
+    it('SUB_ACE_Grid_Row_GutterStr_TEST_0200', 0, async function (done) {
+      console.info('[SUB_ACE_Grid_Row_GutterStr_TEST_0200] START');
+      globalThis.value.message.notify({name:'addLength', value:'50px'});
+
+      await CommonFunc.sleep(3000);
+
+      console.log('get Initial value')
+      let Length_String_00 = CommonFunc.getComponentRect('Length_String_00');
+      let Length_String_01 = CommonFunc.getComponentRect('Length_String_01');
+      let Length_String_02 = CommonFunc.getComponentRect('Length_String_02');
+      let Length_String_03 = CommonFunc.getComponentRect('Length_String_03');
+      let Length_String_04 = CommonFunc.getComponentRect('Length_String_04');
+      let Length_String_05 = CommonFunc.getComponentRect('Length_String_05');
+      let Length_String_06 = CommonFunc.getComponentRect('Length_String_06');
+      let Length_String_07 = CommonFunc.getComponentRect('Length_String_07');
+
+      console.log('assert space')
+      expect(Math.round(Length_String_01.left - Length_String_00.right)).assertEqual(50);
+      expect(Math.round(Length_String_02.left - Length_String_01.right)).assertEqual(50);
+      expect(Math.round(Length_String_03.left - Length_String_02.right)).assertEqual(50);
+      expect(Math.round(Length_String_04.left - Length_String_03.right)).assertEqual(50);
+      expect(Math.round(Length_String_05.left - Length_String_04.right)).assertEqual(50);
+      expect(Math.round(Length_String_07.left - Length_String_06.right)).assertEqual(50);
+
+      expect(Math.round(Length_String_06.top - Length_String_00.bottom)).assertEqual(vp2px(10));
+      expect(Math.round(Length_String_07.top - Length_String_01.bottom)).assertEqual(vp2px(10));
+
+      console.info('[SUB_ACE_Grid_Row_GutterStr_TEST_0200] END');
+      done();
+    });
+
+
+  })
+}
\ No newline at end of file

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_Gutter/Grid_Row_Resource.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Gutter_Length_Resource() {
+  describe('Gutter_Length_Resource', function () {
+    beforeEach(async function (done) {
+      console.info("Gutter_Length_Resource beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_Gutter/Grid_Row_Resource",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Gutter_Length_Resource state pages:" + JSON.stringify(pages));
+        if (!("Gutter_Length_Resource" == pages.name)) {
+          console.info("get Gutter_Length_Resource pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Gutter_Length_Resource page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Gutter_Length_Resource page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Gutter_Length_Resource beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Gutter_Length_Resource after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWGUTTERLENGTH_RESOURCE_0100
+     * @tc.name      testGutterLengthResource
+     * @tc.desc      Set the gutterLength of GridRow to 'app.float.float_1'
+     */
+    it('SUB_ACE_GridRowGutterLength_RESOURCE_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowGutterLength_RESOURCE_0100 START');
+      await CommonFunc.sleep(2000)
+
+      let LengthResource_1 = CommonFunc.getComponentRect('Length_Resource001');
+      let firstLengthResource = CommonFunc.getComponentRect('Length_Resource_0');
+      let secondLengthResource = CommonFunc.getComponentRect('Length_Resource_1');
+      let thirdLengthResource = CommonFunc.getComponentRect('Length_Resource_2');
+      let fourthLengthResource = CommonFunc.getComponentRect('Length_Resource_3');
+      let gridRowLengthResourceJson = getInspectorByKey('Length_Resource001');
+      let gridRow = JSON.parse(gridRowLengthResourceJson);
+      expect(gridRow.$type).assertEqual('GridRow');
+
+      expect(firstLengthResource.top).assertEqual(LengthResource_1.top);
+      expect(secondLengthResource.top).assertEqual(LengthResource_1.top);
+      expect(firstLengthResource.left).assertEqual(LengthResource_1.left);
+
+      expect(Math.round(secondLengthResource.left - firstLengthResource.right)).assertEqual(vp2px(10));
+      expect(Math.round(thirdLengthResource.top - firstLengthResource.bottom)).assertEqual(vp2px(10));
+
+      console.info('SUB_ACE_GridRowGutterLength_RESOURCE_0100 END');
+      done();
+    });
+
+  })
+}

arkui/ace_ets_layout_test/entry/src/main/ets/test/Grid/Grid_Row/Grid_Row_GutterOption/Grid_Row_GutterOption_Number.test.ets

+/**
+ * Copyright (c) 2023 iSoftStone Information Technology (Group) Co.,Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium';
+import router from '@ohos.router';
+import CommonFunc from '../../../../MainAbility/common/Common';
+export default function Grid_Row_GutterOption_Number() {
+  describe('Grid_Row_GutterOption_Number', function () {
+    beforeEach(async function (done) {
+      console.info("GutterOption_Length_Number beforeEach start");
+      let options = {
+        url: "MainAbility/pages/Grid/Grid_Row/Grid_Row_GutterOption/Grid_Row_GutterOption_Number",
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get Grid_Row_GutterOption_Number state pages:" + JSON.stringify(pages));
+        if (!("Grid_Row_GutterOption_Number" == pages.name)) {
+          console.info("get Grid_Row_GutterOption_Number pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await CommonFunc.sleep(2000);
+          console.info("push Grid_Row_GutterOption_Number page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push Grid_Row_GutterOption_Number page error " + JSON.stringify(err));
+        expect().assertFail();
+      }
+      console.info("Grid_Row_GutterOption_Number beforeEach end");
+      done();
+    });
+    afterEach(async function () {
+      await CommonFunc.sleep(2000);
+      console.info("Grid_Row_GutterOption_Number after each called")
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWGUTTEROPTION_NUMBER_0100
+     * @tc.name      testGutterOptionLengthNumber
+     * @tc.desc      Set the GridRowSizeOption of GridRow to {x: -20 ,y: 10}
+     *               the parent component
+     */
+    it('SUB_ACE_GridRowGutterOption_NUMBER_0100', 0, async function (done) {
+      console.info('SUB_ACE_GridRowGutterOption_NUMBER_0100 START');
+      globalThis.value.message.notify({ name:'length', value:-20 })
+      await CommonFunc.sleep(2000)
+
+      let LengthNumber_1 = CommonFunc.getComponentRect('Length_Number001');
+      let firstLengthNumber = CommonFunc.getComponentRect('Length_NumberChange_0');
+      let secondLengthNumber = CommonFunc.getComponentRect('Length_NumberChange_1');
+      let thirdLengthNumber = CommonFunc.getComponentRect('Length_NumberChange_2');
+      let gridRowGutterLengthNumJson = getInspectorByKey('Length_Number001');
+      let gridRowGutter = JSON.parse(gridRowGutterLengthNumJson);
+      expect(gridRowGutter.$type).assertEqual('GridRow');
+
+
+      expect(Math.round(secondLengthNumber.left - firstLengthNumber.right)).assertEqual(vp2px(-20));
+      expect(Math.round(thirdLengthNumber.top - firstLengthNumber.bottom)).assertEqual(vp2px(10));
+
+      console.info('SUB_ACE_GridRowGutterOption_NUMBER_0100 END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWGUTTEROPTION_NUMBER_0200
+     * @tc.name      testGutterOptionNumber
+     * @tc.desc      Set the GridRowSizeOption of GridRow to {x: 0 ,y: 10}
+     */
+    it('SUB_ACE_GridRowGutterOption_NUMBER_0200', 0, async function (done) {
+      console.info('SUB_ACE_GridRowGutterOption_NUMBER_0200 START');
+      globalThis.value.message.notify({ name:'length', value:0 })
+      await CommonFunc.sleep(2000)
+
+      let LengthNumber_1 = CommonFunc.getComponentRect('Length_Number001');
+      let firstLengthNumber = CommonFunc.getComponentRect('Length_NumberChange_0');
+      let secondLengthNumber = CommonFunc.getComponentRect('Length_NumberChange_1');
+      let thirdLengthNumber = CommonFunc.getComponentRect('Length_NumberChange_2');
+      let gridRowGutterLengthNumJson = getInspectorByKey('Length_Number001');
+      let gridRowGutter = JSON.parse(gridRowGutterLengthNumJson);
+      expect(gridRowGutter.$type).assertEqual('GridRow');
+
+      expect(Math.round(secondLengthNumber.left - firstLengthNumber.right)).assertEqual(vp2px(0));
+      expect(Math.round(thirdLengthNumber.top - firstLengthNumber.bottom)).assertEqual(vp2px(10));
+
+      console.info('SUB_ACE_GridRowGutterOption_NUMBER_0200 END');
+      done();
+    });
+
+    /**
+     * @tc.number    SUB_ACE_GRIDROWGUTTEROPTION_NUMBER_0300
+     * @tc.name      testGutterOptionNumber
+     * @tc.desc      Set the GridRowSizeOption of GridRow to {x: 10 ,y: 10}
+     */
+    it('SUB_ACE_GridRowGutterOption_NUMBER_0300', 0, async function (done) {
+      console.info('SUB_ACE_GridRowGutterOption_NUMBER_0300 START');
+      globalThis.value.message.notify({ name:'length', value:10 })
+      await CommonFunc.sleep(2000)
+
+      let LengthNumber_1 = CommonFunc.getComponentRect('Length_Number001');
+      let firstLengthNumber = CommonFunc.getComponentRect('Length_NumberChange_0');
+      let secondLengthNumber = CommonFunc.getComponentRect('Length_NumberChange_1');
+      let thirdLengthNumber = CommonFunc.getComponentRect('Length_NumberChange_2');
+      let gridRowGutterLengthNumJson = getInspectorByKey('Length_Number001');
+      let gridRowGutter = JSON.parse(gridRowGutterLengthNumJson);
+      expect(gridRowGutter.$type).assertEqual('GridRow');
+
+
+      expect(Math.round(secondLengthNumber.left - firstLengthNumber.right)).assertEqual(vp2px(10));
+      expect(Math.round(thirdLengthNumber.top - firstLengthNumber.bottom)).assertEqual(vp2px(10));
+
+      console.info('SUB_ACE_GridRowGutterOption_NUMBER_0300 END');
+      done();
+    });
+  })
+}