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?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption}) 15 16Since API version 9, this API is supported in ArkTS widgets. 17 18**Parameters** 19 20| Name| Type | Mandatory| Description | 21| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ | 22| 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**| 23| offset | number \| [GridColColumnOption](#gridcolcolumnoption) | No | Number of offset columns relative to the original position of the component.<br>Default value: **0** | 24| order | number \| [GridColColumnOption](#gridcolcolumnoption) | No | Sequence number of the element. 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.| 25 26> **NOTE** 27> 28> The 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. 29> 30> The default values vary by device width type. 31> |Parameter\Breakpoint|xs|sm|md|lg|xl|xxl| 32> |---|---|---|---|---|---|---| 33> |span |2 |2 |3 |3 |4 |4 | 34> |offset |2 |2 |3 |5 |5 |5 | 35> |order |20 |20 |20 |3 |3 |3 | 36 37## Attributes 38 39| Name| Type | Mandatory| Description | 40| ------ | ----------------------------- | ---- | ------------------------------------------------------------ | 41| span | number \| GridColColumnOption | No | Number of occupied columns. If it is set to **0**, the element is not involved in layout calculation, that is, the element is not rendered.<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.| 42| gridColOffset | number \| GridColColumnOption | No | Number of offset columns relative to the previous child component of the grid<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.| 43| order | number \| GridColColumnOption | No | Sequence number of the element. Child components of the grid are sorted in ascending order based on their sequence numbers.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.| 44 45## GridColColumnOption 46 47Describes the numbers of grid columns occupied by the **\<GridCol>** component on devices with different width types. 48 49Since API version 9, this API is supported in ArkTS widgets. 50 51| Name | Type | Mandatory | Description | 52| ----- | ------ | ---- | ---------------------------------------- | 53| xs | number | No | Number of grid columns occupied by the **\<GridCol>** component on the mininum-width device. | 54| sm | number | No | Number of grid columns occupied by the **\<GridCol>** component on the small-width device. | 55| md | number | No | Number of grid columns occupied by the **\<GridCol>** component on the medium-width device. | 56| lg | number | No | Number of grid columns occupied by the **\<GridCol>** component on the large-width device. | 57| xl | number | No | Number of grid columns occupied by the **\<GridCol>** component on the extra-large-width device. | 58| xxl | number | No | Number of grid columns occupied by the **\<GridCol>** component on the extra-extra-large-width device. | 59 60## Example 61See [GridRow](ts-container-gridrow.md#example). 62