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> - This component can be used only as a child of [\<Grid>](ts-container-grid.md). 9 10 11## Child Components 12 13This component can contain a single child component. 14 15 16## APIs 17 18GridItem() 19 20 21## Attributes 22 23| Name| Type| Description| 24| -------- | -------- | -------- | 25| rowStart | number | Start row number of the component.| 26| rowEnd | number | End row number of the component.| 27| columnStart | number | Start column number of the component.| 28| columnEnd | number | End column number of the component.| 29| 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**| 30| selectable<sup>8+</sup> | boolean | Whether the 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**| 31| selected<sup>10+</sup> | boolean | Whether the grid item is selected. This attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.<br>**NOTE**<br>This attribute must be used before the [style for the selected state](./ts-universal-attributes-polymorphic-style.md#statestyles) is set.<br>Default value: **false**| 32 33> **NOTE** 34> 35> Rules for setting **rowStart**, **rowEnd**, **columnStart**, and **columnEnd**: 36> 37> 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. 38> 39> If **rowStart**, **rowEnd**, **columnStart**, or **columnEnd** is set, the grid item occupies the specified number of rows (**rowEnd** - **rowStart** + 1) or columns (**columnEnd** - **columnStart** + 1). 40> 41> Settings outside of the valid ranges do not take effect. 42> 43> In the grid that has both **columnTemplate** and **rowTemplate** set, grid items that have **rowStart**/**rowEnd** or **columnStart**/**columnEnd** set are laid out in a row-by-row then column-by-column manner. 44> 45> In the grid that has only **columnTemplate** set, grid items that have **columnStart**/**columnEnd** set are laid out in the specific columns. If there are already grid items in those columns, the grid items will be laid out in another row. 46> 47> In the grid that has only **rowTemplate** set, grid items that have **rowStart**/**rowEnd** set are laid out in the specific rows. If there are already grid items in those rows, the grid items will be laid out in another column. 48> 49> In the grid that has only **columnTemplate** set, grid items whose row or column number settings are invalid are laid out in a row-by-row then column-by-column manner. 50> 51> In the grid that has neither **columnTemplate** nor **rowTemplate** set, the row and column number attributes do not work. 52 53 54## Events 55 56| Name| Description| 57| -------- | -------- | 58| 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. | 59 60 61## Example 62 63```ts 64// xxx.ets 65@Entry 66@Component 67struct GridItemExample { 68 @State numbers: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"] 69 70 build() { 71 Column() { 72 Grid() { 73 GridItem() { 74 Text('4') 75 .fontSize(16) 76 .backgroundColor(0xFAEEE0) 77 .width('100%') 78 .height('100%') 79 .textAlign(TextAlign.Center) 80 }.rowStart(1).rowEnd(2).columnStart(1).columnEnd(2) // Set valid row and column numbers. 81 82 ForEach(this.numbers, (item: string) => { 83 GridItem() { 84 Text(item) 85 .fontSize(16) 86 .backgroundColor(0xF9CF93) 87 .width('100%') 88 .height('100%') 89 .textAlign(TextAlign.Center) 90 } 91 }, (item: string) => item) 92 93 GridItem() { 94 Text('5') 95 .fontSize(16) 96 .backgroundColor(0xDBD0C0) 97 .width('100%') 98 .height('100%') 99 .textAlign(TextAlign.Center) 100 }.columnStart(1).columnEnd(4) // Set only the column numbers. The layout does not start from the first column. 101 } 102 .columnsTemplate('1fr 1fr 1fr 1fr 1fr') 103 .rowsTemplate('1fr 1fr 1fr 1fr 1fr') 104 .width('90%').height(300) 105 }.width('100%').margin({ top: 5 }) 106 } 107} 108``` 109 110 111
