柵格布局是一種通用的輔助定位工具肝匆，對移動設(shè)備的界面設(shè)計有較好的適配懂讯。
使用柵格布局的前提：
1.頁面有等寬列數(shù)跟行數(shù)的元素。方便對頁面元素進(jìn)行定位和排版伐厌。
2.元素之間的間距調(diào)整承绸，等距調(diào)整或x y軸不同的間距調(diào)整。
3.超出一行或一列挣轨，元素排列自動換行军熏。
GridRow為柵格容器組件，需要與子組件GridCol配合使用
柵格系統(tǒng)斷點
柵格系統(tǒng)以設(shè)備的水平寬度作為斷點依據(jù)刃唐，分為xs羞迷、sm、md画饥、lg四類設(shè)備寬度衔瓮。
breakpoints.png
GridRow({
breakpoints: {
value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
reference: BreakpointsReference.WindowSize
},
columns: 6 // 默認(rèn)12列，可以自定義為6列
}) {
ForEach(this.bgColors, (color:Color, index?:number|undefined) => {
GridCol({
span: {
xs: 2, // 在最小寬度類型設(shè)備上抖甘，柵格子組件占據(jù)的柵格容器2列热鞍。
sm: 3, // 在小寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器3列衔彻。
md: 4, // 在中等寬度類型設(shè)備上歉铝，柵格子組件占據(jù)的柵格容器4列谈飒。
lg: 6, // 在大寬度類型設(shè)備上烦绳，柵格子組件占據(jù)的柵格容器6列劳景。
xl: 8, // 在特大寬度類型設(shè)備上，柵格子組件占據(jù)的柵格容器8列柄沮。
}
}) {
Row() {
Text(`${index}`)
}.width("100%").height('50vp')
}.backgroundColor(color)
})
}
排列方向
通過設(shè)置GridRow的direction屬性來指定子組件在柵格容器中的排列方向回梧。GridRowDirection.Row從左往右排列，RowReverse從右往左排列
GridRow({
breakpoints: {
value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
reference: BreakpointsReference.WindowSize
},
columns: 6,
direction: GridRowDirection.Row
})
子組件間距
通過設(shè)置GridRow的gutter屬性來控制子元素間的間距祖搓。
GridRow({
breakpoints: {
value: ['200vp', '300vp', '400vp', '500vp', '600vp'],
reference: BreakpointsReference.WindowSize
},
columns: 6,
gutter: 10// 上下左右均間隔10
gutter:{x: 5, y: 10}// 上下10 左右間隔5
})
