1# 栅格布局
2
3
4栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。具体请参考[Grid-container](../reference/apis-arkui/arkui-js/js-components-grid-container.md)。
5
6
7## 创建grid-container组件
8
9在pages/index目录下的hml文件中创建一个grid-container组件，并添加[Grid-row](../reference/apis-arkui/arkui-js/js-components-grid-row.md)子组件。
10
11
12```html
13<!-- index.hml -->
14<div class="container">
15  <grid-container id="mygrid" gutter="20px" style="background-color: pink;">
16    <grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left:
17      10%;"></grid-row>
18    <grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"></grid-row>
19    <grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row>
20  </grid-container>
21</div>
22```
23
24
25```css
26/* xxx.css */
27.container{
28  flex-direction: column;
29  background-color: #F1F3F5;
30  margin-top: 500px;
31  justify-content: center;
32  align-items: center;
33}
34```
35
36![zh-cn_image_0000001226897009](figures/zh-cn_image_0000001226897009.png)
37
38> **说明：**
39>
40> grid-container仅支持grid-row为子组件。
41
42
43## 调用方法
44
45grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型（xs|sm|md|lg）。
46
47
48```html
49<!-- index.hml -->
50<div class="container">
51  <grid-container id="mygrid" gutter="20px" style="background-color: pink;padding-top: 100px;"
52    onclick="getColumns" onlongpress="getSizeType">
53    <grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left:
54      40%;"></grid-row>
55    <grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left:
56      25%;"></grid-row>
57    <grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left:
58      10%;"></grid-row>
59    <grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row>
60  </grid-container>
61</div>
62```
63
64
65```css
66/* xxx.css */
67.container{
68  flex-direction: column;
69  background-color: #F1F3F5;
70  margin-top: 400px;
71  justify-content: center;
72  align-items: center;
73}
74```
75
76
77```js
78// index.js
79import promptAction from '@ohos.promptAction';
80export default {
81  data:{
82    gutterWidth:'',
83    columnWidth:'',
84    columns:'',
85  },
86  getColumns(){
87    this.$element('mygrid').getColumnWidth((result)=>{
88      this.columnWidth = result;
89    })
90    this.$element('mygrid').getGutterWidth((result)=>{
91      this.gutterWidth = result;
92    })
93    this.$element('mygrid').getColumns((result)=>{
94      this.columns= result;
95    })
96    setTimeout(()=>{
97      promptAction.showToast({duration:5000,message:'columnWidth:'+this.columnWidth+',gutterWidth:'+
98      this.gutterWidth+',getColumns:'+this.columns})
99    })
100  },
101  getSizeType(){
102      this.$element('mygrid').getSizeType((result)=>{
103      promptAction.showToast({duration:2000,message:'get size type:'+result})
104    })
105  },
106}
107```
108
109![zh-cn_image_0000001227135613](figures/zh-cn_image_0000001227135613.gif)
110
111
112## 添加grid-col
113
114创建grid-container组件并添加grid-row，在grid-row组件内添加grid-col组件形成布局。
115
116
117```html
118<!-- index.hml -->
119<div class="container">
120  <grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
121    <grid-row style="height: 100px;justify-content: space-around;background-color: #4cbff3;width: 100%;">
122      <grid-col span="0">
123        <div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
124          <text style="color: dodgerblue;" onclick="getCol">top</text>
125        </div>
126      </grid-col>
127    </grid-row>
128    <grid-row style="height:500px;justify-content:space-around;background-color: #3b55ef;width: 100%;">
129      <grid-col span="0" style="width: 20%;">
130        <div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
131          <text style="color: dodgerblue;">left</text>
132        </div>
133      </grid-col>
134      <grid-col span="0" style="background-color:orange;width: 80%;">
135        <div style="width: 100%;height: 100%;align-items: center;justify-content: center;">
136          <text>right</text>
137        </div>
138      </grid-col>
139    </grid-row>
140    <grid-row style="height: 100px;justify-content: space-around;background-color: #4cbff3;width: 100%;">
141      <grid-col style="background-color:#c075ef;" span="0">
142        <div style="width: 100%;height: 100%;padding: 20px;align-items: center;justify-content: center;">
143          <text>bottom</text>
144        </div>
145      </grid-col>
146    </grid-row>
147  </grid-container>
148</div>
149```
150
151
152```css
153/* xxx.css */
154.container{
155  flex-direction: column;
156  background-color: #F1F3F5;
157  width: 100%;
158  height: 100%;
159  justify-content: center;
160  align-items: center;
161}
162text{
163  color: white;
164  font-size: 40px;
165}
166```
167
168![zh-cn_image_0000001227135731](figures/zh-cn_image_0000001227135731.png)
169
170> **说明：**
171>
172> grid-row仅支持grid-col为子组件，只能在grid-col组件中添加填充的内容。
173
174
175## 场景示例
176
177本场景中循环输出list中的内容，创建出网格布局。进行下拉操时触发refresh（刷新页面）方法，这时会向list数组中添加一条数据并设置setTimeout（延迟触发），达到刷新请求数据的效果。
178
179
180```html
181<!-- index.hml -->
182<div class="container">
183  <refresh refreshing="{{fresh}}" onrefresh="refresh">
184    <grid-container id="mygrid" gutter="20" style="margin: 10px;">
185      <grid-row style="height:200px;width: 100%;background-color: #e7e7e2;margin-top: 50px; padding: 0px 20px;border-radius: 15px;" for="item in list">
186        <grid-col span="0" style="width: 40%;">
187          <div style="align-items: center;justify-content: center">
188            <image src="{{item.src}}" style="object-fit: contain;border-radius: 30px;"></image>
189          </div>
190        </grid-col>
191        <grid-col span="0" style="width: 60%;">
192          <div style="align-items: center;justify-content: center;width: 100%;height: 100%;text-align: center;">
193            <text>image{{item.id}}</text>
194          </div>
195        </grid-col>
196      </grid-row>
197    </grid-container>
198  </refresh>
199</div>
200```
201
202
203```css
204/* xxx.css */
205.container{
206  flex-direction: column;
207  background-color: #F1F3F5;
208  width: 100%;
209  height: 100%;
210}
211text{
212  color: #0a0aef;
213  font-size: 60px;
214}
215```
216
217
218```js
219// index.js
220import promptAction from '@ohos.promptAction';
221export default {
222  data:{
223    list:[
224      {src:'common/images/1.png',id:'1'},
225      {src:'common/images/2.png',id:'2'},
226      {src:'common/images/3.png',id:'3'}
227    ],
228    fresh:false
229  },
230  refresh(e) {
231    promptAction.showToast({
232      message: 'refreshing'
233    })
234    var that = this;
235    that.fresh = e.refreshing;
236    setTimeout(function () {
237      that.fresh = false;
238      that.list.unshift({src: 'common/images/4.png',id:'4'});
239      promptAction.showToast({
240        message: 'succeed'
241      })
242    }, 2000)
243  }
244}
245```
246
247
248![zh-cn_image_0000001263160403](figures/zh-cn_image_0000001263160403.gif)