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**Parameters**
25| Name |Type|Mandatory|Description|
26|-----|-----|----|----|
27| option | [GridRowOptions](#gridrowoptions)  | No | Child component options of the grid layout. |
28
29## GridRowOptions
30| Name |Type|Mandatory|Description|
31|-----|-----|----|----|
32|columns| number \| [GridRowColumnOption](#gridrowcolumnoption) |  No |Number of columns in the grid layout.<br>Default value: **12** |
33|gutter|[Length](ts-types.md#length) \| [GutterOption](#gutteroption)|   No |Gutter of the grid layout.<br>Default value: **0** |
34|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>} |
35|direction|[GridRowDirection](#gridrowdirection)|   No |Arrangement direction of the grid layout.<br>Default value: **GridRowDirection.Row** |
36
37## GutterOption
38
39Provides the gutter options for the grid layout to define the spacing between child components in different directions.
40
41**Widget capability**: This API can be used in ArkTS widgets since API version 9.
42
43**Atomic service API**: This API can be used in atomic services since API version 11.
44
45| Name  | Type  | Mandatory  | Description                                    |
46| ----- | ------ | ---- | ---------------------------------------- |
47| x  | [Length](ts-types.md#length) \| [GridRowSizeOption](#gridrowsizeoption) | No  | Horizontal spacing between grid child components.   |
48| y  | [Length](ts-types.md#length) \| [GridRowSizeOption](#gridrowsizeoption) | No  | Vertical spacing between grid child components.   |
49
50## GridRowColumnOption
51
52Describes the numbers of grid columns for devices with different grid sizes.
53
54**Widget capability**: This API can be used in ArkTS widgets since API version 9.
55
56**Atomic service API**: This API can be used in atomic services since API version 11.
57
58| Name  | Type  | Mandatory  | Description                                    |
59| ----- | ------ | ---- | ---------------------------------------- |
60| xs  | number | No   | Number of grid columns on the device where the grid size is xs.   |
61| sm  | number | No   | Number of grid columns on the device where the grid size is sm.     |
62| md  | number | No   | Number of grid columns on the device where the grid size is md.   |
63| lg  | number | No   | Number of grid columns on the device where the grid size is lg.     |
64| xl  | number | No   | Number of grid columns on the device where the grid size is xl.   |
65| xxl | number | No   | Number of grid columns on the device where the grid size is xxl.   |
66
67**NOTE**
68
69In 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. 
70|Breakpoint|Value Range|
71|---|-----------|
72|xs |[0, n0)    |
73|sm |[n0, n1)   |
74|md |[n1, n2)   |
75|lg |[n2, n3)   |
76|xl |[n3, n4)   |
77|xxl|[n4, INF)  |
78
79## GridRowSizeOption
80
81Describes the gutter sizes for different device width types.
82
83**Widget capability**: This API can be used in ArkTS widgets since API version 9.
84
85**Atomic service API**: This API can be used in atomic services since API version 11.
86
87| Name  | Type  | Mandatory  | Description                                    |
88| ----- | ------ | ---- | ---------------------------------------- |
89| xs  | [Length](ts-types.md#length) | No   | Gutter size for minimum device width.   |
90| sm  | [Length](ts-types.md#length) | No   | Gutter size for small device width.     |
91| md  | [Length](ts-types.md#length) | No   | Gutter size for medium device width.   |
92| lg  | [Length](ts-types.md#length) | No   | Gutter size for large device width.     |
93| xl  | [Length](ts-types.md#length) | No   | Gutter size for extra large device width.   |
94| xxl | [Length](ts-types.md#length) | No   | Gutter size for extra extra large device width.   |
95
96## BreakPoints
97
98Sets breakpoints for the responsive grid container.
99
100**Widget capability**: This API can be used in ArkTS widgets since API version 9.
101
102**Atomic service API**: This API can be used in atomic services since API version 11.
103
104| Name  | Type  | Mandatory  | Description                                    |
105| ----- | ------ | ---- | ---------------------------------------- |
106| value  | Array&lt;string&gt; | No | Array of monotonically increasing breakpoints.<br>Default value: **["320vp", "600vp", "840vp"]**   |
107| reference  | [BreakpointsReference](#breakpointsreference)  | No   | Breakpoint switching reference.<br>Default value: **BreakpointsReference.WindowSize** |
108```ts
109  // Enable the xs, sm, and md breakpoints.
110  breakpoints: {value: ["100vp", "200vp"]}
111  // Enable four breakpoints: xs, sm, md, and lg. The breakpoint range must be monotonically increasing.
112  breakpoints: {value: ["320vp", "600vp", "840vp"]}
113  // Enable five breakpoints: xs, sm, md, lg, and xl. The number of breakpoint ranges cannot exceed the number of breakpoints minus 1.
114  breakpoints: {value: ["320vp", "600vp", "840vp", "1080vp"]}
115```
116
117## BreakpointsReference
118
119**Widget capability**: This API can be used in ArkTS widgets since API version 9.
120
121**Atomic service API**: This API can be used in atomic services since API version 11.
122
123| Name | Description |
124| -------- | -------- |
125| WindowSize | The window is used as a reference. |
126| ComponentSize | The container is used as a reference. |
127
128## GridRowDirection
129
130**Widget capability**: This API can be used in ArkTS widgets since API version 9.
131
132**Atomic service API**: This API can be used in atomic services since API version 11.
133
134| Name | Description |
135| -------- | -------- |
136| Row | Grid elements are arranged in the row direction. |
137| RowReverse | Grid elements are arranged in the reverse row direction. |
138
139**NOTE**
140* Grid elements can be arranged only in the **Row** or **RowReverse** direction, but not in the **Column** or **ColumnReverse** direction.
141* 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.
142* If the **span** value of a single child component exceeds the maximum number of columns, the maximum number of columns is used.
143* 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.
144* Below is the display effect of **Item1: GridCol({span: 6}), Item2: GridCol({ span: 8, offset:11})**. 
145
146|1      | 2     | 3     | 4     | 5     | 6     | 7     | 8     | 9     | 10    | 11    | 12    |
147| ----- | ------ | ---- | ---- | -----|-----|---------|--------|------|------- |------- |------- |
148| $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$|$\circ$| - |  - |  - |  -  | -  | -  |
149| -     | -     | -     | -     | -     |       |       |       |       |       |   |   |
150| $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$|$\circ$|$\circ$|$\circ$|  |   |   |   |
151
152## Attributes
153
154In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
155
156### alignItems<sup>10+</sup>
157
158alignItems(value: ItemAlign)
159
160Sets 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.
161
162**Widget capability**: This API can be used in ArkTS widgets since API version 10.
163
164**Atomic service API**: This API can be used in atomic services since API version 11.
165
166**System capability**: SystemCapability.ArkUI.ArkUI.Full
167
168**Parameters** 
169
170| Name | Type                                       | Mandatory | Description                                                        |
171| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ |
172| 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**. |
173
174
175## Events
176
177### onBreakpointChange
178
179onBreakpointChange(callback: (breakpoints: string) => void)
180
181Triggered when the breakpoint changes.
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|breakpoints| string |No|Breakpoint change.<br> The value can be **"xs"**, **"sm"**, **"md"**, **"lg"**, **"xl"**, or **"xxl"**.|
194
195## Example
196
197```ts
198// xxx.ets
199@Entry
200@Component
201struct GridRowExample {
202  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
203  @State currentBp: string = 'unknown'
204
205  build() {
206    Column() {
207      GridRow({
208        columns: 5,
209        gutter: { x: 5, y: 10 },
210        breakpoints: { value: ["400vp", "600vp", "800vp"],
211          reference: BreakpointsReference.WindowSize },
212        direction: GridRowDirection.Row
213      }) {
214        ForEach(this.bgColors, (color: Color) => {
215          GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 }, offset: 0, order: 0 }) {
216            Row().width("100%").height("20vp")
217          }.borderColor(color).borderWidth(2)
218        })
219      }.width("100%").height("100%")
220      .onBreakpointChange((breakpoint) => {
221        this.currentBp = breakpoint
222      })
223    }.width('80%').margin({ left: 10, top: 5, bottom: 5 }).height(200)
224    .border({ color: '#880606', width: 2 })
225  }
226}
227```
228
229![figures/gridrow.png](figures/gridrow.png)
230