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 16Creates a **GridCol** component. 17 18**Widget capability**: This API can be used in ArkTS widgets since API version 9. 19 20**Atomic service API**: This API can be used in atomic services since API version 11. 21 22**System capability**: SystemCapability.ArkUI.ArkUI.Full 23 24**Parameters** 25| Name| Type | Mandatory| Description | 26| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 27| option | [GridColOptions](#gridcoloptions) | No | Options of the **GridCol** component.| 28 29## GridColOptions 30 31Defines the options of the **GridCol** component. 32 33**Widget capability**: This API can be used in ArkTS widgets since API version 9. 34 35**Atomic service API**: This API can be used in atomic services since API version 11. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39| Name| Type | Mandatory| Description | 40| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 41| 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>The value is an integer greater than 0.<br>Default value: **1**.| 42| offset | number \| [GridColColumnOption](#gridcolcolumnoption) | No | Number of offset columns relative to the original position of the component.<br>The value is an integer greater than 0.<br>Default value: **0**. | 43| 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>The value is an integer greater than 0.<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.| 44 45The 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. 46 47## Attributes 48In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 49 50### span 51 52span(value: number | GridColColumnOption) 53 54Sets 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. 55 56**Widget capability**: This API can be used in ArkTS widgets since API version 9. 57 58**Atomic service API**: This API can be used in atomic services since API version 11. 59 60**System capability**: SystemCapability.ArkUI.ArkUI.Full 61 62**Parameters** 63 64| Name| Type | Mandatory| Description | 65| ------ | ------------------------------------------------------------ | ---- | ------------------------ | 66| value | number \| [GridColColumnOption](#gridcolcolumnoption) | Yes | Number of occupied columns.<br>The value is an integer greater than 0.<br>Default value: **1**.| 67 68### gridColOffset 69 70gridColOffset(value: number | GridColColumnOption) 71 72Sets the number of offset columns relative to the original position of the component. 73 74**Widget capability**: This API can be used in ArkTS widgets since API version 9. 75 76**Atomic service API**: This API can be used in atomic services since API version 11. 77 78**System capability**: SystemCapability.ArkUI.ArkUI.Full 79 80**Parameters** 81 82| Name| Type | Mandatory| Description | 83| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------ | 84| value | number \| [GridColColumnOption](#gridcolcolumnoption) | Yes | Number of offset columns relative to the previous child component of the grid<br>The value is an integer greater than 0.<br>Default value: **0**.| 85 86### order 87 88order(value: number | GridColColumnOption) 89 90Sets the sequence number of the component. Child components of the grid are sorted in ascending order based on their sequence numbers. 91 92**Widget capability**: This API can be used in ArkTS widgets since API version 9. 93 94**Atomic service API**: This API can be used in atomic services since API version 11. 95 96**System capability**: SystemCapability.ArkUI.ArkUI.Full 97 98**Parameters** 99 100| Name| Type | Mandatory| Description | 101| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 102| 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>The value is an integer greater than 0.<br>Default value: **0**.| 103 104## GridColColumnOption 105 106Describes the numbers of grid columns occupied by the **GridCol** component on devices with different width types. 107 108**Widget capability**: This API can be used in ArkTS widgets since API version 9. 109 110**Atomic service API**: This API can be used in atomic services since API version 11. 111 112**System capability**: SystemCapability.ArkUI.ArkUI.Full 113 114| Name | Type | Mandatory | Description | 115| ----- | ------ | ---- | ---------------------------------------- | 116| xs | number | No | Number of grid columns on the device where the grid size is xs. | 117| sm | number | No | Number of grid columns on the device where the grid size is sm. | 118| md | number | No | Number of grid columns on the device where the grid size is md. | 119| lg | number | No | Number of grid columns on the device where the grid size is lg. | 120| xl | number | No | Number of grid columns on the device where the grid size is xl. | 121| xxl | number | No | Number of grid columns on the device where the grid size is xxl. | 122 123## Example 124See the example for [GridRow](ts-container-gridrow.md#example). 125