1# GridRow 2 3The **\<GridRow>** component is used in a grid layout, together with its child component **[\<GridCol>](ts-container-gridcol.md)**. 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 10## Child Components 11 12This component can contain the **\<GridCol>** child component. 13 14 15## APIs 16GridRow(option?: {columns?: number | GridRowColumnOption, gutter?: Length | GutterOption, breakpoints?: BreakPoints, direction?: GridRowDirection}) 17 18Since API version 9, this API is supported in ArkTS widgets. 19 20**Parameters** 21 22| Name|Type|Mandatory|Description| 23|-----|-----|----|----| 24|gutter|Length \| GutterOption| No |Gutter of the grid layout. **x** indicates the horizontal direction.| 25|columns| number \| GridRowColumnOption | No |Number of columns in the grid layout.| 26|breakpoints|BreakPoints| No |Array of breakpoints for the breakpoint value and the corresponding reference based on the window or container size.| 27|direction|GridRowDirection| No |Arrangement direction of the grid layout.| 28 29## GutterOption 30 31Since API version 9, this API is supported in ArkTS widgets. 32 33| Name | Type | Mandatory | Description | 34| ----- | ------ | ---- | ---------------------------------------- | 35| x | Length \| GridRowSizeOption | No | Gutter in the horizontal direction. | 36| y | Length \| GridRowSizeOption | No | Gutter in the vertical direction. | 37 38## GridRowColumnOption 39 40Describes the numbers of grid columns for different device width types. 41 42Since API version 9, this API is supported in ArkTS widgets. 43 44| Name | Type | Mandatory | Description | 45| ----- | ------ | ---- | ---------------------------------------- | 46| xs | number | No | Device of the minimum size. | 47| sm | number | No | Small-sized device. | 48| md | number | No | Medium-sized device. | 49| lg | number | No | Large-sized device. | 50| xl | number | No | Extra-large-sized device. | 51| xxl | number | No | Ultra-large-sized device. | 52 53## GridRowSizeOption 54 55Describes the gutter sizes for different device width types. 56 57Since API version 9, this API is supported in ArkTS widgets. 58 59| Name | Type | Mandatory | Description | 60| ----- | ------ | ---- | ---------------------------------------- | 61| xs | Length | No | Device of the minimum size. | 62| sm | Length | No | Small-sized device. | 63| md | Length | No | Medium-sized device. | 64| lg | Length | No | Large-sized device. | 65| xl | Length | No | Extra-large-sized device. | 66| xxl | Length | No | Ultra-large-sized device. | 67 68## BreakPoints 69 70Since API version 9, this API is supported in ArkTS widgets. 71 72| Name | Type | Mandatory | Description | 73| ----- | ------ | ---- | ---------------------------------------- | 74| value | Array<string> | No | Array of monotonically increasing breakpoints.<br>Default value: **["320vp", "520vp", "840vp"]** | 75| reference | BreakpointsReference | No | Breakpoint switching reference.| 76```ts 77 // Enable the xs, sm, and md breakpoints. 78 breakpoints: {value: ["100vp", "200vp"]} 79 // Enable four breakpoints: xs, sm, md, and lg. The breakpoint range must be monotonically increasing. 80 breakpoints: {value: ["320vp", "520vp", "840vp"]} 81 // Enable five breakpoints: xs, sm, md, lg, and xl. The number of breakpoint ranges cannot exceed the number of breakpoints minus 1. 82 breakpoints: {value: ["320vp", "520vp", "840vp", "1080vp"]} 83``` 84 85## BreakpointsReference 86 87Since API version 9, this API is supported in ArkTS widgets. 88 89| Name| Description| 90| -------- | -------- | 91| WindowSize | The window is used as a reference.| 92| ComponentSize | The container is used as a reference.| 93 94## GridRowDirection 95 96Since API version 9, this API is supported in ArkTS widgets. 97 98| Name| Description| 99| -------- | -------- | 100| Row | Grid elements are arranged in the row direction.| 101| RowReverse | Grid elements are arranged in the reverse row direction.| 102 103A grid supports a maximum of six breakpoints: xs, sm, md, lg, xl and xxl, whose names cannot be changed. Assume that the input array is [n0, n1, n2, n3, n4], then the value ranges of breakpoints are as follows. 104 105|Breakpoint|Value Range| 106|---|-----------| 107|xs |[0, n0) | 108|sm |[n0, n1) | 109|md |[n1, n2) | 110|lg |[n2, n3) | 111|xl |[n3, n4) | 112|xxl|[n4, INF) | 113 114**NOTE** 115* Grid elements can be arranged only in the **Row** or **RowReverse** direction, but not in the **Column** or **ColumnReverse** direction. 116* 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. 117* If the **span** value of a single child component exceeds the maximum number of columns, the maximum number of columns is used. 118* 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. 119* Below is the display effect of **Item1: GridCol({span: 6}), Item2: GridCol({ span: 8, offset:11})**. 120 121|1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 122| ----- | ------ | ---- | ---- | -----|-----|---------|--------|------|------- |------- |------- | 123| $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$|$\circ$| - | - | - | - | - | - | 124| - | - | - | - | - | | | | | | | | 125| $\circ$ | $\circ$ | $\circ$ | $\circ$ | $\circ$|$\circ$|$\circ$|$\circ$| | | | | 126 127## Attributes 128 129The [universal attributes](ts-universal-attributes-size.md) are supported. 130 131 132## Events 133 134### onBreakpointChange 135 136onBreakpointChange(callback: (breakpoints: string) => void) 137 138Since API version 9, this API is supported in ArkTS widgets. 139 140**Parameters** 141 142| Name | Type | Mandatory | Description | 143| ----- | ------ | ---- | ---------------------------------------- | 144|breakpoints| string |Yes|Breakpoint change.<br>The value can be `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`, or `"xxl"`.| 145 146## Example 147 148```ts 149// xxx.ets 150@Entry 151@Component 152struct GridRowExample { 153 @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown] 154 @State currentBp: string = 'unknown' 155 156 build() { 157 Column() { 158 GridRow({ 159 columns: 5, 160 gutter: { x: 5, y: 10 }, 161 breakpoints: { value: ["400vp", "600vp", "800vp"], 162 reference: BreakpointsReference.WindowSize }, 163 direction: GridRowDirection.Row 164 }) { 165 ForEach(this.bgColors, (color) => { 166 GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) { 167 Row().width("100%").height("20vp") 168 }.borderColor(color).borderWidth(2) 169 }) 170 }.width("100%").height("100%") 171 .onBreakpointChange((breakpoint) => { 172 this.currentBp = breakpoint 173 }) 174 }.width('80%').margin({ left: 10, top: 5, bottom: 5 }).height(200) 175 .border({ color: '#880606', width: 2 }) 176 } 177} 178``` 179 180 181
