1# GridRow
2
3The responsive grid layout provides rules for layout design and resolves issues of dynamic layout across devices with different sizes, thereby ensuring layout consistency across layouts on different devices.
4
5The **GridRow** component is used in a grid layout, together with its child component [GridCol](ts-container-gridcol.md).
6
7>  **NOTE**
8>
9> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12## Child Components
13
14This component can contain the **GridCol** child component.
15
16
17## APIs
18GridRow(option?: GridRowOptions)
19
20**Widget capability**: This API can be used in ArkTS widgets since API version 9.
21
22**Atomic service API**: This API can be used in atomic services since API version 11.
23
24**System capability**: SystemCapability.ArkUI.ArkUI.Full
25
26**Parameters**
27| Name|Type|Mandatory|Description|
28|-----|-----|----|----|
29| option | [GridRowOptions](#gridrowoptions) | No | Child component options of the grid layout.|
30
31## GridRowOptions
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|columns| number \| [GridRowColumnOption](#gridrowcolumnoption) |  No |Number of columns in the grid layout.<br>Default value: **12**|
42|gutter|[Length](ts-types.md#length) \| [GutterOption](#gutteroption)|   No |Gutter of the grid layout.<br>Default value: **0**|
43|breakpoints|[BreakPoints](#breakpoints)|  No |Array of breakpoints for the breakpoint value and the corresponding reference based on the window or container size.<br>Default value:<br>{<br>value: ["320vp", "600vp", "840vp"],<br>reference: BreakpointsReference.WindowSize<br>} |
44|direction|[GridRowDirection](#gridrowdirection)|   No |Arrangement direction of the grid layout.<br>Default value: **GridRowDirection.Row**|
45
46## GutterOption
47
48Provides the gutter options for the grid layout to define the spacing between child components in different directions.
49
50**Widget capability**: This API can be used in ArkTS widgets since API version 9.
51
52**Atomic service API**: This API can be used in atomic services since API version 11.
53
54**System capability**: SystemCapability.ArkUI.ArkUI.Full
55
56| Name  | Type  | Mandatory  | Description                                    |
57| ----- | ------ | ---- | ---------------------------------------- |
58| x  | [Length](ts-types.md#length) \| [GridRowSizeOption](#gridrowsizeoption) | No  | Horizontal spacing between grid child components.   |
59| y  | [Length](ts-types.md#length) \| [GridRowSizeOption](#gridrowsizeoption) | No  | Vertical spacing between grid child components.   |
60
61## GridRowColumnOption
62
63Describes the numbers of grid columns for devices with different grid sizes.
64
65**Widget capability**: This API can be used in ArkTS widgets since API version 9.
66
67**Atomic service API**: This API can be used in atomic services since API version 11.
68
69**System capability**: SystemCapability.ArkUI.ArkUI.Full
70
71| Name  | Type  | Mandatory  | Description                                    |
72| ----- | ------ | ---- | ---------------------------------------- |
73| xs  | number | No   | Number of grid columns on the device where the grid size is xs.   |
74| sm  | number | No   | Number of grid columns on the device where the grid size is sm.     |
75| md  | number | No   | Number of grid columns on the device where the grid size is md.   |
76| lg  | number | No   | Number of grid columns on the device where the grid size is lg.     |
77| xl  | number | No   | Number of grid columns on the device where the grid size is xl.   |
78| xxl | number | No   | Number of grid columns on the device where the grid size is xxl.   |
79
80**NOTE**
81
82In the **GridRow** component, you can define the value range of [breakpoints](../../../ui/arkts-layout-development-grid-layout.md#grid-breakpoints). A maximum of six breakpoints are supported, which are xs, sm, md, lg, xl, and xxl. The breakpoint names cannot be modified. Assume that the input array is [n0, n1, n2, n3, n4], then the value ranges of breakpoints are as follows.
83|Breakpoint|Value Range|
84|---|-----------|
85|xs |[0, n0)    |
86|sm |[n0, n1)   |
87|md |[n1, n2)   |
88|lg |[n2, n3)   |
89|xl |[n3, n4)   |
90|xxl|[n4, INF)  |
91
92## GridRowSizeOption
93
94Describes the gutter sizes for different device width types.
95
96**Widget capability**: This API can be used in ArkTS widgets since API version 9.
97
98**Atomic service API**: This API can be used in atomic services since API version 11.
99
100**System capability**: SystemCapability.ArkUI.ArkUI.Full
101
102| Name  | Type  | Mandatory  | Description                                    |
103| ----- | ------ | ---- | ---------------------------------------- |
104| xs  | [Length](ts-types.md#length) | No   | Gutter size for minimum device width.   |
105| sm  | [Length](ts-types.md#length) | No   | Gutter size for small device width.     |
106| md  | [Length](ts-types.md#length) | No   | Gutter size for medium device width.   |
107| lg  | [Length](ts-types.md#length) | No   | Gutter size for large device width.     |
108| xl  | [Length](ts-types.md#length) | No   | Gutter size for extra large device width.   |
109| xxl | [Length](ts-types.md#length) | No   | Gutter size for extra extra large device width.   |
110
111## BreakPoints
112
113Sets breakpoints for the responsive grid container.
114
115**Widget capability**: This API can be used in ArkTS widgets since API version 9.
116
117**Atomic service API**: This API can be used in atomic services since API version 11.
118
119**System capability**: SystemCapability.ArkUI.ArkUI.Full
120
121| Name  | Type  | Mandatory  | Description                                    |
122| ----- | ------ | ---- | ---------------------------------------- |
123| value  | Array&lt;string&gt; | No | Array of monotonically increasing breakpoints.<br>Default value: **["320vp", "600vp", "840vp"]**   |
124| reference  | [BreakpointsReference](#breakpointsreference) | No   | Breakpoint switching reference.<br>Default value: **BreakpointsReference.WindowSize**|
125```ts
126  // Enable the xs, sm, and md breakpoints.
127  breakpoints: {value: ["100vp", "200vp"]}
128  // Enable four breakpoints: xs, sm, md, and lg. The breakpoint range must be monotonically increasing.
129  breakpoints: {value: ["320vp", "600vp", "840vp"]}
130  // Enable five breakpoints: xs, sm, md, lg, and xl. The number of breakpoint ranges cannot exceed the number of breakpoints minus 1.
131  breakpoints: {value: ["320vp", "600vp", "840vp", "1080vp"]}
132```
133
134## BreakpointsReference
135
136**Widget capability**: This API can be used in ArkTS widgets since API version 9.
137
138**Atomic service API**: This API can be used in atomic services since API version 11.
139
140**System capability**: SystemCapability.ArkUI.ArkUI.Full
141
142| Name| Description|
143| -------- | -------- |
144| WindowSize | The window is used as a reference.|
145| ComponentSize | The container is used as a reference.|
146
147## GridRowDirection
148
149**Widget capability**: This API can be used in ArkTS widgets since API version 9.
150
151**Atomic service API**: This API can be used in atomic services since API version 11.
152
153**System capability**: SystemCapability.ArkUI.ArkUI.Full
154
155| Name| Description|
156| -------- | -------- |
157| Row | Grid elements are arranged in the row direction.|
158| RowReverse | Grid elements are arranged in the reverse row direction.|
159
160**NOTE**
161* Grid elements can be arranged only in the **Row** or **RowReverse** direction, but not in the **Column** or **ColumnReverse** direction.
162* The location and size of a grid child component can be calculated only based on **span** and **offset**. If the **span** values of child components add up to a number greater than the allowed number of columns, the grid will automatically wraps lines.
163* If the **span** value of a single child component exceeds the maximum number of columns, the maximum number of columns is used.
164* If a child component takes up more than the total number of columns according to its **offset** and **span** settings, it will be placed in a new row.
165* Below is the display effect of **Item1: GridCol({span: 6}), Item2: GridCol({ span: 8, offset:11})**.
166
167|1      | 2     | 3     | 4     | 5     | 6     | 7     | 8     | 9     | 10    | 11    | 12    |
168| ----- | ------ | ---- | ---- | -----|-----|---------|--------|------|------- |------- |------- |
169| $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$|$\circ$| - |  - |  - |  -  | -  | -  |
170| -     | -     | -     | -     | -     |       |       |       |       |       |   |   |
171| $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$|$\circ$|$\circ$|$\circ$|  |   |   |   |
172
173## Attributes
174
175In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
176
177### alignItems<sup>10+</sup>
178
179alignItems(value: ItemAlign)
180
181Sets the alignment mode of the **GridCol** components along the vertical main axis of the **GridRow** component. The alignment mode of the **GridCol** component can also be set using **alignSelf([ItemAlign](ts-appendix-enums.md#itemalign))**. If both of the preceding methods are used, the setting of **alignSelf(ItemAlign)** prevails.
182
183**Widget capability**: This API can be used in ArkTS widgets since API version 10.
184
185**Atomic service API**: This API can be used in atomic services since API version 11.
186
187**System capability**: SystemCapability.ArkUI.ArkUI.Full
188
189**Parameters**
190
191| Name| Type                                       | Mandatory| Description                                                        |
192| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ |
193| value  | [ItemAlign](ts-appendix-enums.md#itemalign) | Yes  | Alignment mode of the **GridCol** components along the vertical main axis of the **GridRow** component.<br>Default value: **ItemAlign.Start**<br>**NOTE**<br>**ItemAlign** supports the following enums: **ItemAlign.Start**, **ItemAlign.Center**, **ItemAlign.End**, and **ItemAlign.Stretch**.|
194
195
196## Events
197
198### onBreakpointChange
199
200onBreakpointChange(callback: (breakpoints: string) => void)
201
202Triggered when the breakpoint changes.
203
204**Widget capability**: This API can be used in ArkTS widgets since API version 9.
205
206**Atomic service API**: This API can be used in atomic services since API version 11.
207
208**System capability**: SystemCapability.ArkUI.ArkUI.Full
209
210**Parameters**
211
212| Name  | Type  | Mandatory  | Description  |
213| ----- | ------ | ---- | ---------------------------------------- |
214|breakpoints| string |No|Breakpoint change.<br> The value can be **"xs"**, **"sm"**, **"md"**, **"lg"**, **"xl"**, or **"xxl"**.|
215
216## Example
217
218```ts
219// xxx.ets
220@Entry
221@Component
222struct GridRowExample {
223  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
224  @State currentBp: string = 'unknown'
225
226  build() {
227    Column() {
228      GridRow({
229        columns: 5,
230        gutter: { x: 5, y: 10 },
231        breakpoints: { value: ["400vp", "600vp", "800vp"],
232          reference: BreakpointsReference.WindowSize },
233        direction: GridRowDirection.Row
234      }) {
235        ForEach(this.bgColors, (color: Color) => {
236          GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 }, offset: 0, order: 0 }) {
237            Row().width("100%").height("20vp")
238          }.borderColor(color).borderWidth(2)
239        })
240      }.width("100%").height("100%")
241      .onBreakpointChange((breakpoint) => {
242        this.currentBp = breakpoint
243      })
244    }.width('80%').margin({ left: 10, top: 5, bottom: 5 }).height(200)
245    .border({ color: '#880606', width: 2 })
246  }
247}
248```
249
250![figures/gridrow.png](figures/gridrow.png)
251