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 32## Events 33 34| Name| Description| 35| -------- | -------- | 36| 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 selected by the mouse; returns **false** otherwise.| 37 38 39## Example 40 41```ts 42// xxx.ets 43@Entry 44@Component 45struct GridItemExample { 46 @State numbers: string[] = Array.apply(null, { length: 16 }).map(function (item, i) { 47 return i.toString() 48 }) 49 50 build() { 51 Column() { 52 Grid() { 53 GridItem() { 54 Text('4') 55 .fontSize(16) 56 .backgroundColor(0xFAEEE0) 57 .width('100%') 58 .height('100%') 59 .textAlign(TextAlign.Center) 60 }.rowStart(1).rowEnd(4) 61 62 ForEach(this.numbers, (item) => { 63 GridItem() { 64 Text(item) 65 .fontSize(16) 66 .backgroundColor(0xF9CF93) 67 .width('100%') 68 .height('100%') 69 .textAlign(TextAlign.Center) 70 } 71 }, item => item) 72 73 GridItem() { 74 Text('5') 75 .fontSize(16) 76 .backgroundColor(0xDBD0C0) 77 .width('100%') 78 .height('100%') 79 .textAlign(TextAlign.Center) 80 }.columnStart(1).columnEnd(5) 81 } 82 .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 83 .rowsTemplate('1fr 1fr 1fr 1fr 1fr') 84 .width('90%').height(300) 85 }.width('100%').margin({ top: 5 }) 86 } 87} 88``` 89 90 91
