diff --git a/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218108719.png b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218108719.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf89500815be29bf77bc1c50f56106bfbc010e19
Binary files /dev/null and b/zh-cn/application-dev/ui/figures/zh-cn_image_0000001218108719.png differ
diff --git a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
index 8fc5f5cfe572208bc16d23fe458c0e4074212fea..f704864a0d06017cd72fd67752caa776ef2145f6 100644
--- a/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
+++ b/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md
@@ -65,12 +65,12 @@
 - 也可以通过参数sizeType指定此栅格容器内的组件使用此设备宽度类型的栅格设置，如：
 
   ```ts
-  GridContainer({ sizeType: SizeType.SM) {
+  GridContainer({ sizeType: SizeType.SM }) {
        Row() {
          Text('1')
            .useSizeType({
-             xs: { span: 2},
-             sm: { span: 3, offset: 1 },
+             xs: { span: 2, offset: 0 },
+             sm: { span: 2, offset: 0 },
              md: { span: 6, offset: 2 },
              lg: { span: 8, offset: 2 },
            })
@@ -89,15 +89,18 @@ GridContainer() {
    Row() {
      Text('1')
        .useSizeType({
-         xs: { span: 2},
-         sm: { span: 3, offset: 1 },
+         xs: { span: 2, offset: 0 },
+         sm: { span: 0, offset: 0 },
          md: { span: 6, offset: 2 },
          lg: { span: 8, offset: 2 },
        })
    }
 }
 ```
-其中`sm: { span: 2, offset: 0 } `指在设备宽度类型为SM的设备上，Text组件占用3列，且放在栅格容器的第1列上。
+其中`sm: { span: 2, offset: 0 } `指在设备宽度类型为SM的设备上，Text组件占用2列，且放在栅格容器的第1列上。
+
+![zh-cn_image_0000001218108718](figures/zh-cn_image_0000001218108719.png)
+
 ## 场景示例
 
 使用栅格布局可以灵活地在不同的设备宽度类型下呈现合适的效果，而不必书写大量的代码兼容不同宽度类型的设备。