diff --git a/arkui/ace_ets_component_apilack/entry/src/main/config.json b/arkui/ace_ets_component_apilack/entry/src/main/config.json
index 4585556cf1f00f20728579b36648bec87255e275..bbbac5fd05ab1e522cfd3f2f9d090afe67bda10f 100644
--- a/arkui/ace_ets_component_apilack/entry/src/main/config.json
+++ b/arkui/ace_ets_component_apilack/entry/src/main/config.json
@@ -106,6 +106,7 @@
           "pages/page_transition",
           "pages/panel",
           "pages/path",
+          "pages/grid_col_muli",
           "pages/pluginComponent",
           "pages/polygon",
           "pages/polyLine",
diff --git a/arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/grid_col_muli.ets b/arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/grid_col_muli.ets
new file mode 100644
index 0000000000000000000000000000000000000000..fb588b9ee7ad3ed1a9960af4531f2d6f6de0c7b0
--- /dev/null
+++ b/arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/grid_col_muli.ets
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2023-2024 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.
+ */
+@Entry
+@Component
+struct GridRowExample {
+  @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: 5,
+        gutter: { x: 5, y: 10 },
+        breakpoints: { value: ["400vp", "600vp", "800vp"],
+          reference: BreakpointsReference.WindowSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color,index) => {
+          GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 }}) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2).gridColOffset(3).key(index + "")
+        })
+      }.width("100%").height("100%")
+      .onBreakpointChange((breakpoint) => {
+        this.currentBp = breakpoint
+      })
+    }.width('80%').margin({ left: 10, top: 5, bottom: 5 }).height(200)
+    .border({ color: '#880606', width: 2 })
+  }
+}
\ No newline at end of file
diff --git a/arkui/ace_ets_component_apilack/entry/src/main/ets/test/List.test.ets b/arkui/ace_ets_component_apilack/entry/src/main/ets/test/List.test.ets
index 08c9cd619b94186b0d1f262b3506a6e8ce42cdeb..d3e3215e66f2b0d1417b24111a5b7969b8168f76 100644
--- a/arkui/ace_ets_component_apilack/entry/src/main/ets/test/List.test.ets
+++ b/arkui/ace_ets_component_apilack/entry/src/main/ets/test/List.test.ets
@@ -62,6 +62,7 @@ import xcomponentGetXComponentContextJsunit from './xcomponent.test.ets';
 import routerJsunit from './router.test.ets';
 
 export default function testsuite() {
+  grid_colSpanJsunit();
   lazyForEachOnDataAddJsunit()
   alphabetIndexerOnSelectJsunit()
   checkBoxGroupSelectAllJsunit()
diff --git a/arkui/ace_ets_component_apilack/entry/src/main/ets/test/grid_col.test.ets b/arkui/ace_ets_component_apilack/entry/src/main/ets/test/grid_col.test.ets
index 13bbd28b904957798da51e9508a1aeaf94f3abb4..e6b4628f42fea65ee56a86d92e874c4534c3ff40 100644
--- a/arkui/ace_ets_component_apilack/entry/src/main/ets/test/grid_col.test.ets
+++ b/arkui/ace_ets_component_apilack/entry/src/main/ets/test/grid_col.test.ets
@@ -61,5 +61,31 @@ export default function grid_colSpanJsunit() {
       console.info("[testgrid_colSpan0001] width value :" + obj.$attrs.width);
       done();
     });
+
+    /*
+     * @tc.number       SUB_ACE_BASIC_ETS_API_0002
+     * @tc.name         testgrid_col_refactor_name002
+     * @tc.desc         acegrid_gridColRefactorName0002
+     */
+    it('testgrid_col_refactor_name002', 0, async function (done) {
+      console.info('testgrid_col_refactor_name002 START');
+      await Utils.sleep(2000);
+      let options = {
+        uri: 'pages/grid_col_muli',
+      }
+      try {
+            await router.push(options);
+            await Utils.sleep(2000);
+            let strJson = getInspectorByKey('2');
+            let obj = JSON.parse(strJson);
+            expect(obj.$type).assertEqual('GridCol');
+            console.info("[testgrid_col_refactor_name002] component height strJson:" + JSON.stringify(obj.$attrs));
+            expect(obj.$attrs.gridColOffset).assertEqual("3");
+      } catch (err) {
+          console.error("push grid_col page error: " + err);
+      }
+      done();
+    });
+
   })
 }