1# GridItem 2 3The **\<GridItem>** component provides a single item in a grid. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Supported 13 14 15## APIs 16 17GridItem() 18 19 20## Attributes 21 22| Name| Type| Description| 23| -------- | -------- | -------- | 24| rowStart | number | Start row number of the component.| 25| rowEnd | number | End row number of the component.| 26| columnStart | number | Start column number of the component.| 27| columnEnd | number | End column number of the component.| 28| forceRebuild<sup>(deprecated)</sup> | boolean | Whether to re-create the component when it is being built.<br>This API is deprecated since API version 9. Whether to re-create the component is automatically determined based on the component attributes and child component changes. No manual configuration is required.<br>Default value: **false**| 29| selectable<sup>8+</sup> | boolean | Whether the current grid item is selectable by the mouse.<br>**NOTE**<br>This attribute takes effect only when mouse frame selection is enabled for the parent **\<Grid>** container.<br>Default value: **true** | 30 31> **NOTE** 32> 33> Rules for setting **rowStart**, **rowEnd**, **columnStart**, and **columnEnd**: 34> 35> - The valid value range of **rowStart** and **rowEnd** is 0 to the total number of rows minus 1. The valid value range of **columnStart** and **columnEnd** is 0 to the total number of columns minus 1. 36> 37> - Settings outside of the valid ranges do not take effect. 38> 39> - In the grid that has both **columnTemplate** and **rowTemplate** set, a grid item takes up the specified number of rows (rowEnd – rowStart + 1) or columns (columnEnd – columnStart + 1), depending on whether **rowStart**/**rowEnd** or **columnStart**/**columnEnd** is set. 40>- In the grid that has only **columnTemplate** set, a grid item takes up the specified number of columns. 41> - In the grid that has only **rowTemplate** set, a grid item takes up the specified number of rows. 42>- In the grid that has neither **columnTemplate** nor **rowTemplate** set, the row and column number attributes do not work. 43 44 45## Events 46 47| Name| Description| 48| -------- | -------- | 49| onSelect(event: (isSelected: boolean) => void)<sup>8+</sup> | Triggered when the selected state of the grid item changes.<br>**isSelected**: returns **true** if the grid item is being selected by the mouse; returns **false** otherwise. | 50 51 52## Example 53 54```ts 55// xxx.ets 56@Entry 57@Component 58struct GridItemExample { 59 @State numbers: string[] = Array.apply(null, { length: 16 }).map(function (item, i) { 60 return i.toString() 61 }) 62 63 build() { 64 Column() { 65 Grid() { 66 GridItem() { 67 Text('4') 68 .fontSize(16) 69 .backgroundColor(0xFAEEE0) 70 .width('100%') 71 .height('100%') 72 .textAlign(TextAlign.Center) 73 }.rowStart(1).rowEnd(2).columnStart(1).columnEnd(2) // Set valid row and column numbers. 74 75 ForEach(this.numbers, (item) => { 76 GridItem() { 77 Text(item) 78 .fontSize(16) 79 .backgroundColor(0xF9CF93) 80 .width('100%') 81 .height('100%') 82 .textAlign(TextAlign.Center) 83 } 84 }, item => item) 85 86 GridItem() { 87 Text('5') 88 .fontSize(16) 89 .backgroundColor(0xDBD0C0) 90 .width('100%') 91 .height('100%') 92 .textAlign(TextAlign.Center) 93 }.columnStart(1).columnEnd(4) // Set only the column numbers. The layout does not start from the first column. 94 } 95 .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 96 .rowsTemplate('1fr 1fr 1fr 1fr 1fr') 97 .width('90%').height(300) 98 }.width('100%').margin({ top: 5 }) 99 } 100} 101``` 102 103 104
