1# GridCol
2
3The **GridCol** component must be used as a child component of the [GridRow](ts-container-gridrow.md) container.
4
5>  **NOTE**
6>
7> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Child Components
10
11This component can contain only one child component.
12## APIs
13
14GridCol(option?: GridColOptions)
15
16**Widget capability**: This API can be used in ArkTS widgets since API version 9.
17
18**Atomic service API**: This API can be used in atomic services since API version 11.
19
20**System capability**: SystemCapability.ArkUI.ArkUI.Full
21
22**Parameters**
23| Name| Type                                                 | Mandatory| Description                                                        |
24| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ |
25| option   | [GridColOptions](#gridcoloptions) | No  | Child component options of the grid layout.|
26
27## GridColOptions
28
29**Widget capability**: This API can be used in ArkTS widgets since API version 9.
30
31**Atomic service API**: This API can be used in atomic services since API version 11.
32
33**System capability**: SystemCapability.ArkUI.ArkUI.Full
34
35| Name| Type                                                 | Mandatory| Description                                                        |
36| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ |
37| span   | number \| [GridColColumnOption](#gridcolcolumnoption) | No  | Number of columns occupied by the component. If it is set to **0**, the component is not involved in layout calculation, that is, the component is not rendered.<br>Default value: **1**|
38| offset | number \| [GridColColumnOption](#gridcolcolumnoption) | No  | Number of offset columns relative to the original position of the component.<br>Default value: **0**          |
39| order  | number \| [GridColColumnOption](#gridcolcolumnoption) | No  | Sequence number of the component. Child components of the grid are sorted in ascending order based on their sequence numbers.<br>Default value: **0**<br>**NOTE**<br>If a child component shares an **order** value with another child component or does not have **order** set, it is displayed based on its code sequence number.<br>If **order** is not set for all child components, those that have **order** set are displayed after those that do not and are sorted in ascending order based on the value.|
40
41The values of `span`, `offset`, and `order` attributes are inherited in the sequence of **xs**, **sm**, **md**, **lg**, **xl**, and **xxl**. If no value is set for a breakpoint, the value is obtained from the previous breakpoint.
42
43## Attributes
44In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
45
46### span
47
48span(value: number | GridColColumnOption)
49
50Sets the number of columns occupied by the component. If it is set to **0**, the element is not involved in layout calculation, that is, the element is not rendered.
51
52**Widget capability**: This API can be used in ArkTS widgets since API version 9.
53
54**Atomic service API**: This API can be used in atomic services since API version 11.
55
56**System capability**: SystemCapability.ArkUI.ArkUI.Full
57
58**Parameters**
59
60| Name| Type                                                        | Mandatory| Description                    |
61| ------ | ------------------------------------------------------------ | ---- | ------------------------ |
62| value  | number \| [GridColColumnOption](#gridcolcolumnoption) | Yes  | Number of occupied columns.<br>Default value: **1**|
63
64### gridColOffset
65
66gridColOffset(value: number | GridColColumnOption)
67
68Sets the number of offset columns relative to the original position of the component.
69
70**Widget capability**: This API can be used in ArkTS widgets since API version 9.
71
72**Atomic service API**: This API can be used in atomic services since API version 11.
73
74**System capability**: SystemCapability.ArkUI.ArkUI.Full
75
76**Parameters**
77
78| Name| Type                                                        | Mandatory| Description                                            |
79| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------ |
80| value  | number \| [GridColColumnOption](#gridcolcolumnoption) | Yes  | Number of offset columns relative to the previous child component of the grid<br>Default value: **0**|
81
82### order
83
84order(value: number | GridColColumnOption)
85
86Sets the sequence number of the component. Child components of the grid are sorted in ascending order based on their sequence numbers.
87
88**Widget capability**: This API can be used in ArkTS widgets since API version 9.
89
90**Atomic service API**: This API can be used in atomic services since API version 11.
91
92**System capability**: SystemCapability.ArkUI.ArkUI.Full
93
94**Parameters**
95
96| Name| Type                                                        | Mandatory| Description                                                        |
97| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
98| value  | number \| [GridColColumnOption](#gridcolcolumnoption) | Yes  | Sequence number of the component. Child components of the grid are sorted in ascending order based on their sequence numbers.<br>Default value: **0**|
99
100## GridColColumnOption
101
102Describes the numbers of grid columns occupied by the **GridCol** component on devices with different width types.
103
104**Widget capability**: This API can be used in ArkTS widgets since API version 9.
105
106**Atomic service API**: This API can be used in atomic services since API version 11.
107
108**System capability**: SystemCapability.ArkUI.ArkUI.Full
109
110| Name  | Type  | Mandatory  | Description                                    |
111| ----- | ------ | ---- | ---------------------------------------- |
112| xs  | number | No   | Number of grid columns on the device where the grid size is xs.   |
113| sm  | number | No   | Number of grid columns on the device where the grid size is sm.     |
114| md  | number | No   | Number of grid columns on the device where the grid size is md.   |
115| lg  | number | No   | Number of grid columns on the device where the grid size is lg.     |
116| xl  | number | No   | Number of grid columns on the device where the grid size is xl.   |
117| xxl | number | No   | Number of grid columns on the device where the grid size is xxl.   |
118
119## Example
120See [GridRow](ts-container-gridrow.md#example).
121