概述：
网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。
网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。
ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。
Grid组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件。
网格布局是一种二维布局。Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列，
同时提供了垂直和水平布局能力。当网格容器组件尺寸发生变化时，
所有子组件以及间距会等比例调整，从而实现网格布局的自适应能力。根据Grid的这些布局能力，可以构建出不同样式的网格布局，如下图所示。
如果Grid组件设置了宽高属性，则其尺寸为设置值。如果没有设置宽高属性，Grid组件的尺寸默认适应其父组件的尺寸。
Grid组件根据行列数量与占比属性的设置，可以分为三种布局情况：
-
行、列数量与占比同时设置：Grid只展示固定行列数的元素，其余元素不展示，且Grid不可滚动。（推荐使用该种布局方式）
-
只设置行、列数量与占比中的一个：元素按照设置的方向进行排布，超出的元素可通过滚动的方式展示。
-
行列数量与占比都不设置：元素在布局方向上排布，其行列数由布局方向、单个网格的宽高等多个属性共同决定。超出行列容纳范围的元素不展示，且Grid不可滚动。
1、设置排列方式
rowsTemplate和columnsTemplate属性值是一个由多个空格和'数字+fr'间隔拼接的字符串，
fr的个数即网格布局的行或列数，fr前面的数值大小，用于计算该行或列在网格布局宽度上的占比，最终决定该行或列宽度。
Grid() {
}
.rowsTemplate('1fr 1fr') // 设置两行
.columnsTemplate('1fr 2fr 1fr') // 设置三列 占比权重分别为1 2 1
2、设置主轴方向
若没有设置行列数量与占比，可以通过layoutDirection设置网格布局的主轴方向，决定子组件的排列方式。
此时可以结合minCount和maxCount属性来约束主轴方向上的网格数量。
Grid() {
...
}
.maxCount(3) // 一行最多3个
.layoutDirection(GridDirection.Row) // 从左到右排列，超出换下一行
说明
- layoutDirection属性仅在不设置rowsTemplate和columnsTemplate时生效，此时元素在layoutDirection方向上排列。
- 仅设置rowsTemplate时，Grid主轴为水平方向，交叉轴为垂直方向。
- 仅设置columnsTemplate时，Grid主轴为垂直方向，交叉轴为水平方向。
3、设置行列间距
Grid() {
...
}
.columnsGap(10) // 设置列间距10
.rowsGap(15) // 设置行间距15
4、构建可滚动的网格布局
在设置Grid的行列数量与占比时，如果仅设置行、列数量与占比中的一个，
即仅设置rowsTemplate或仅设置columnsTemplate属性，网格单元按照设置的方向排列，超出Grid显示区域后，Grid拥有可滚动能力。
Grid() {
ForEach(this.gridItems,(item,index)=>{
GridItem(){
Text(item)
}
.height('30%')
.width('30%')
.margin(10)
.backgroundColor(Color.Red)
})
}
.rowsTemplate('1fr 1fr 1fr') // 设置两行
.rowsGap(10) // 设置行间距为10
.columnsGap(20) // 设置列间距为20
.layoutDirection(GridDirection.Row) // 设置从左到右排列，排满一行再排下一行,只设置rowsTemplate属性，当内容超出Grid区域时，可水平滚动。
.height('50%')
标签：布局,GridItem,1fr,网格,Grid,设置,组件,ArkUi From： https://www.cnblogs.com/xqxacm/p/18528419