1# Grid
2
3>  **NOTE**
4>
5>  - This module is deprecated since API version 9. You are advised to use [GridCol](ts-container-gridcol.md) and [GridRow](ts-container-gridrow.md) instead.
6>
7>  - The column width and column gap in the grid layout are determined by the nearest parent component **GridContainer**. The component tree that uses grid attributes must contain one **GridContainer** component or more.
8>
9>  - To call the **gridSpan** or **gridOffset** attribute, its parent or ancestor component must be **GridContainer**.
10
11## Attributes
12
13| Name       | Type                                                    | Description                                                        |
14| ----------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
15| useSizeType<sup>(deprecated) </sup> | {<br>xs?: number \| { span: number, offset: number },<br>sm?: number \| { span: number, offset: number },<br>md?: number \| { span: number, offset: number },<br>lg?: number \| { span: number, offset: number }<br>} | Number of occupied columns and offset columns for a specific device width type. **span** indicates the number of occupied columns, and **offset** indicates the number of offset columns.<br>If the value is of the number type, only the number of columns can be set. If the value is in the format of {"span": 1, "offset": 0}, both the number of occupied columns and the number of offset columns need to be set.<br>- **xs** indicates that the device width type is **SizeType.XS**.<br>- **sm** indicates that the device width type is **SizeType.SM**.<br>- **md** indicates that the device width type is **SizeType.MD**.<br>- **lg** indicates that the device width type is **SizeType.LG**.<br>This attribute is deprecated since API version 9. You are advised to use [GridCol](ts-container-gridcol.md) and [GridRow](ts-container-gridrow.md) instead.|
16| gridSpan<sup>(deprecated) </sup>    | number                   | Default number of occupied columns, that is, the number of occupied columns when **span** in **useSizeType** is not set.<br>**NOTE**<br>If the **span** attribute is set, the component width is determined by the grid layout.<br>Default value: **1**<br>**Atomic service API**: This API can be used in atomic services since API version 11.<br>This attribute is deprecated since API version 14. You are advised to use [GridCol](ts-container-gridcol.md) and [GridRow](ts-container-gridrow.md) instead. |
17| gridOffset<sup>(deprecated) </sup>  | number                                                       | Default number of offset columns, that is, the number of offset columns in the start direction of the parent component (which is also the nth column that the component is in) when **offset** in **useSizeType** is not set.<br>**NOTE**<br>- After this attribute is set, the horizontal layout of the current component does not follow the original layout of the parent component. Instead, it offsets along the start direction of the parent component.<br>- Offset = (Column width + Gap) \* Number of columns.<br>- After this attribute is set, sibling components will be arranged relatively to this component, as in the relative layout.<br>Default value: **0**<br>**Atomic service API**: This API can be used in atomic services since API version 11.<br>This attribute is deprecated since API version 14. You are advised to use [GridCol](ts-container-gridcol.md) and [GridRow](ts-container-gridrow.md) instead.|
18
19## Example
20
21<!--code_no_check-->
22
23```ts
24// xxx.ets
25@Entry
26@Component
27struct GridContainerExample1 {
28  build() {
29    Column() {
30      Text('useSizeType').fontSize(15).fontColor(0xCCCCCC).width('90%')
31      GridContainer() {
32        Row() {
33          Row() {
34            Text('Left').fontSize(25)
35          }
36          .useSizeType({
37            xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 0 },
38            md: { span: 1, offset: 0 }, lg: { span: 2, offset: 0 }
39          })
40          .height("100%")
41          .backgroundColor(0x66bbb2cb)
42
43          Row() {
44            Text('Center').fontSize(25)
45          }
46          .useSizeType({
47            xs: { span: 1, offset: 0 }, sm: { span: 2, offset: 1 },
48            md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 }
49          })
50          .height("100%")
51          .backgroundColor(0x66b6c5d1)
52
53          Row() {
54            Text('Right').fontSize(25)
55          }
56          .useSizeType({
57            xs: { span: 1, offset: 0 }, sm: { span: 1, offset: 3 },
58            md: { span: 2, offset: 6 }, lg: { span: 3, offset: 9 }
59          })
60          .height("100%")
61          .backgroundColor(0x66bbb2cb)
62        }
63        .height(200)
64
65      }
66      .backgroundColor(0xf1f3f5)
67      .margin({ top: 10 })
68
69      // Set the span and offset of the component separately. The resultant effect is equivalent to that achieved by using sm in useSizeType on the device of the sm type.
70      Text('gridSpan,gridOffset').fontSize(15).fontColor(0xCCCCCC).width('90%')
71      GridContainer() {
72        Row() {
73          Row() {
74            Text('Left').fontSize(25)
75          }
76          .gridSpan(1)
77          .height("100%")
78          .backgroundColor(0x66bbb2cb)
79
80          Row() {
81            Text('Center').fontSize(25)
82          }
83          .gridSpan(2)
84          .gridOffset(1)
85          .height("100%")
86          .backgroundColor(0x66b6c5d1)
87
88          Row() {
89            Text('Right').fontSize(25)
90          }
91          .gridSpan(1)
92          .gridOffset(3)
93          .height("100%")
94          .backgroundColor(0x66bbb2cb)
95        }.height(200)
96      }
97    }
98  }
99}
100```
101
102**Figure 1** Device width type SM
103
104![en-us_image_0000001256858405](figures/en-us_image_0000001256858405.png)
105
106**Figure 2** Device width type MD
107
108![en-us_image_0000001257058415](figures/en-us_image_0000001257058415.png)
109
110**Figure 3** Device width type LG
111
112![en-us_image_0000001212378416](figures/en-us_image_0000001212378416.png)
113
114**Figure 4** Setting gridSpan and gridOffset separately has the same effect as useSizeType for a specific device width type
115
116![gridSpan](figures/gridSpan.png)
117