Grid 的子组件 GridItem，是用来放置内容的。例如：
@Entry@Componentstruct Index { build() { Grid() { GridItem() { Text("1") } } }}
运行结果：
上述代码尚未体现出 Grid 组件的优势，Grid 的优势在于它能够按照行和列来排列数据。
通过 Grid 的 columnsTemplate 和 rowsTemplate 属性可分别设置列数和行数。
例如，要设置一个 2 行 2 列的布局，可以将 columnsTemplate 的值设置为 "1fr 1fr"，rowsTemplate 的值也设置为"1fr 1fr"。
@Entry@Componentstruct Index { build() { Grid() { GridItem() { Text("1") } GridItem() { Text("2") } GridItem() { Text("3") } GridItem() { Text("4") } } // 设置列数 .columnsTemplate("1fr 1fr") // 设置行数 .rowsTemplate("1fr 1fr") }}
运行结果：
从运行结果来看，“1234”均匀分布在 2 行 2 列的界面上。列数平分了界面的宽，行数平分了界面的高。
间距通过 Grid 的 columnsGap 和 rowsGap 两个属性，可以分别设置列间距和行间距。例如：
@Entry@Componentstruct Index { build() { Grid() { GridItem() { Text("1") } GridItem() { Text("2") } GridItem() { Text("3") } GridItem() { Text("4") } } // 设置列数 .columnsTemplate("1fr 1fr") // 列间距 .columnsGap(32) // 行间距 .rowsGap(32) }}
运行结果：
设置之前：
设置之后：
从运行结果来看，设置前后有明显区别，内容看起来更清晰。
最后，网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等，希望大家熟练掌握它。
