• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# GridContainer
2
3The **\<GridContainer>** component lays out components vertically. It is used only in the grid layout.
4
5>  **NOTE**
6>
7>  This component is deprecated since API version 9. You are advised to use **[\<GridCol>](ts-container-gridcol.md)** and **[\<GridRow>](ts-container-gridrow.md)** instead.
8>
9>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
10
11
12## Child Components
13
14Supported
15
16
17## APIs
18
19GridContainer(value?: { columns?: number | 'auto', sizeType?: SizeType, gutter?: number | string, margin?: number | string})
20
21**Parameters**
22
23| Name| Type| Mandatory| Description|
24| -------- | -------- | -------- | -------- |
25| columns | number \| 'auto' | No| Total number of columns in the current layout.<br>Default value: **'auto'**|
26| sizeType | SizeType | No| Device size type.<br>Default value: **SizeType.Auto**|
27| gutter | number \| string | No| Gutter of the grid layout. This parameter cannot be set to a percentage. |
28| margin | number \| string | No| Margin of the grid layout. This parameter cannot be set to a percentage. |
29
30## SizeType
31
32| Name| Description|
33| -------- | -------- |
34| XS | Device of the minimum size.|
35| SM | Small-sized device.|
36| MD | Medium-sized device.|
37| LG | Large-sized device.|
38| Auto | Auto. The size type is selected based on the device type.|
39
40
41## Attributes
42
43The universal attributes and attributes of the **[<Column\>](ts-container-column.md#attributes)** component are supported.
44
45
46## Events
47
48The universal events are supported.
49
50
51## Example
52
53```ts
54// xxx.ets
55@Entry
56@Component
57struct GridContainerExample {
58  @State sizeType: SizeType = SizeType.XS
59
60  build() {
61    Column({ space: 5 }) {
62      GridContainer({ columns: 12, sizeType: this.sizeType, gutter: 10, margin: 20 }) {
63        Row() {
64          Text('1')
65            .useSizeType({
66              xs: { span: 6, offset: 0 },
67              sm: { span: 2, offset: 0 },
68              md: { span: 2, offset: 0 },
69              lg: { span: 2, offset: 0 }
70            })
71            .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
72          Text('2')
73            .useSizeType({
74              xs: { span: 2, offset: 6 },
75              sm: { span: 6, offset: 2 },
76              md: { span: 2, offset: 2 },
77              lg: { span: 2, offset: 2 }
78            })
79            .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center)
80          Text('3')
81            .useSizeType({
82              xs: { span: 2, offset: 8 },
83              sm: { span: 2, offset: 8 },
84              md: { span: 6, offset: 4 },
85              lg: { span: 2, offset: 4 }
86            })
87            .height(50).backgroundColor(0x4682B4).textAlign(TextAlign.Center)
88          Text('4')
89            .useSizeType({
90              xs: { span: 2, offset: 10 },
91              sm: { span: 2, offset: 10 },
92              md: { span: 2, offset: 10 },
93              lg: { span: 6, offset: 6 }
94            })
95            .height(50).backgroundColor(0x00BFFF).textAlign(TextAlign.Center)
96        }
97      }.width('90%')
98
99      Text('Click Simulate to change the device width').fontSize(9).width('90%').fontColor(0xCCCCCC)
100      Row() {
101        Button('XS')
102          .onClick(() => {
103            this.sizeType = SizeType.XS
104          }).backgroundColor(0x317aff)
105        Button('SM')
106          .onClick(() => {
107            this.sizeType = SizeType.SM
108          }).backgroundColor(0x317aff)
109        Button('MD')
110          .onClick(() => {
111            this.sizeType = SizeType.MD
112          }).backgroundColor(0x317aff)
113        Button('LG')
114          .onClick(() => {
115            this.sizeType = SizeType.LG
116          }).backgroundColor(0x317aff)
117      }
118    }.width('100%').margin({ top: 5 })
119  }
120}
121```
122
123![en-us_image_0000001256858425](figures/en-us_image_0000001256858425.gif)
124