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 28The 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 30The default values vary by device width type. 31 32|Parameter\Breakpoint|xs|sm|md|lg|xl|xxl| 33|---|---|---|---|---|---|---| 34|span |2 |2 |3 |3 |4 |4 | 35|offset |2 |2 |3 |5 |5 |5 | 36|order |20 |20 |20 |3 |3 |3 | 37 38## Attributes 39 40| Name| Type | Mandatory| Description | 41| ------ | ----------------------------- | ---- | ------------------------------------------------------------ | 42| span | number \| [GridColColumnOption](#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.| 43| gridColOffset | number \| [GridColColumnOption](#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.| 44| 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>Since API version 9, this API is supported in ArkTS widgets.| 45 46## GridColColumnOption 47 48Describes the numbers of grid columns occupied by the **\<GridCol>** component on devices with different width types. 49 50Since API version 9, this API is supported in ArkTS widgets. 51 52| Name | Type | Mandatory | Description | 53| ----- | ------ | ---- | ---------------------------------------- | 54| xs | number | No | Number of grid columns on the device where the grid size is xs. | 55| sm | number | No | Number of grid columns on the device where the grid size is sm. | 56| md | number | No | Number of grid columns on the device where the grid size is md. | 57| lg | number | No | Number of grid columns on the device where the grid size is lg. | 58| xl | number | No | Number of grid columns on the device where the grid size is xl. | 59| xxl | number | No | Number of grid columns on the device where the grid size is xxl. | 60 61## Example 62See [GridRow](ts-container-gridrow.md#example). 63