网格布局是由“行”和“列”分割的单元格所组成。
布局
Grid的子组件必须是GridItem组件，Grid组件支持自定义行列数和每行每列尺寸占比、设置子组件横跨几行或者几列，同时也提供了垂直和水平布局的能力。
Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比。
rowsTemplate和columnsTemplate属性值是由空格和‘数字 + fr’ 间隔拼接的字符串，fr的个数即网格布局的行或列数。
image.png
Grid() {
...
}
.rowTemplate('1fr 1fr 1fr') //每行占1份
.columnsTemplate('1fr 2fr 1fr') //一共4份，占1:2:1的比例
设置主轴方向
可以通过layoutDirection设置网格布局的主轴方向，决定子组件的排列方式。还可以结合minCount和maxCount属性来约束主轴方向上的网格数量。
Grid() {
GridItem() {
Text("Grid布局1")
}
GridItem() {
Text("Grid布局2")
}
GridItem() {
Text("Grid布局3")
}
}.layoutDirection(GridDirection.Row) // 按行来排列
.maxCount(3)//表示主轴方向上最大的网格单元数为3
设置行列间距
通过Grid的rowsGap和columnsGap可以设置网格布局的行列间距。
Grid() {
....
}.columnsGap(10)
.rowsGap(15)//行间距15vp，列间距为10vp
