1# GridCol
2
3栅格子组件，必须作为栅格容器组件([GridRow](ts-container-gridrow.md))的子组件使用。
4
5>  **说明：**
6>
7> 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## 子组件
10
11可以包含单个子组件。
12## 接口
13
14GridCol(option?: GridColOptions)
15
16**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
17
18**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
19
20**系统能力：** SystemCapability.ArkUI.ArkUI.Full
21
22**参数：**
23| 参数名 | 类型                                                  | 必填 | 说明                                                         |
24| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ |
25| option   | [GridColOptions](#gridcoloptions对象说明) | 否   | 栅格布局子组件参数。 |
26
27## GridColOptions对象说明
28
29**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
30
31**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
32
33**系统能力：** SystemCapability.ArkUI.ArkUI.Full
34
35| 名称 | 类型                                                  | 必填 | 说明                                                         |
36| ------ | ----------------------------------------------------- | ---- | ------------------------------------------------------------ |
37| span   | number \| [GridColColumnOption](#gridcolcolumnoption) | 否   | 栅格子组件占用栅格容器组件的列数。span为0表示该元素不参与布局计算，即不会被渲染。<br/>默认值：1 |
38| offset | number \| [GridColColumnOption](#gridcolcolumnoption) | 否   | 栅格子组件相对于原本位置偏移的列数。<br/>默认值：0           |
39| order  | number \| [GridColColumnOption](#gridcolcolumnoption) | 否   | 元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。<br/>默认值：0<br/>**说明：**<br/>当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。<br/>当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从小到大排列。 |
40
41`span`、`offset`、`order`属性按照`xs`、`sm`、`md`、`lg`、`xl`、`xxl`的顺序具有“继承性”，未设置值的断点将会从前一个断点取值。
42
43## 属性
44除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
45
46### span
47
48span(value: number | GridColColumnOption)
49
50设置占用列数。span为0，意味着该元素不参与布局计算，即不会被渲染。
51
52**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
53
54**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
55
56**系统能力：** SystemCapability.ArkUI.ArkUI.Full
57
58**参数：**
59
60| 参数名 | 类型                                                         | 必填 | 说明                     |
61| ------ | ------------------------------------------------------------ | ---- | ------------------------ |
62| value  | number&nbsp;\|&nbsp;[GridColColumnOption](#gridcolcolumnoption) | 是   | 占用列数。<br/>默认值：1 |
63
64### gridColOffset
65
66gridColOffset(value: number | GridColColumnOption)
67
68设置相对于前一个栅格子组件偏移的列数。
69
70**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
71
72**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
73
74**系统能力：** SystemCapability.ArkUI.ArkUI.Full
75
76**参数：**
77
78| 参数名 | 类型                                                         | 必填 | 说明                                             |
79| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------ |
80| value  | number&nbsp;\|&nbsp;[GridColColumnOption](#gridcolcolumnoption) | 是   | 相对于前一个栅格子组件偏移的列数。<br/>默认值：0 |
81
82### order
83
84order(value: number | GridColColumnOption)
85
86设置元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。
87
88**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
89
90**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
91
92**系统能力：** SystemCapability.ArkUI.ArkUI.Full
93
94**参数：**
95
96| 参数名 | 类型                                                         | 必填 | 说明                                                         |
97| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
98| value  | number&nbsp;\|&nbsp;[GridColColumnOption](#gridcolcolumnoption) | 是   | 元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。<br/>默认值：0 |
99
100## GridColColumnOption
101
102用于自定义指定在不同宽度设备类型上，栅格子组件占据的栅格数量单位。
103
104**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
105
106**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
107
108**系统能力：** SystemCapability.ArkUI.ArkUI.Full
109
110| 名称   | 类型   | 必填   | 说明                                     |
111| ----- | ------ | ---- | ---------------------------------------- |
112| xs  | number | 否    | 在栅格大小为xs的设备上，栅格容器组件的栅格列数。    |
113| sm  | number | 否    | 在栅格大小为sm的设备上，栅格容器组件的栅格列数。      |
114| md  | number | 否    | 在栅格大小为md的设备上，栅格容器组件的栅格列数。    |
115| lg  | number | 否    | 在栅格大小为lg的设备上，栅格容器组件的栅格列数。      |
116| xl  | number | 否    | 在栅格大小为xl的设备上，栅格容器组件的栅格列数。    |
117| xxl | number | 否    | 在栅格大小为xxl的设备上，栅格容器组件的栅格列数。    |
118
119## 示例
120请参考栅格容器示例代码([GridRow](ts-container-gridrow.md#示例))