概念

网格布局是由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。网格布局具有较强的页面均分能力，子组件占比控制能力，是一种重要自适应布局，其使用场景有九宫格图片展示、日历、计算器等。

ArkUI提供了Grid容器组件和子组件GridItem，用于构建网格布局。Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等渲染控制方式生成子组件。

网格布局-计算器

代码如下

@Entry
@Component
struct One{
  build(){
    Column(){
      Row(){
        Text("计算器").fontSize(28)
          .fontColor(Color.White).fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center).width("100%")
      }.height(60).backgroundColor("#600f").width("100%")
      Row(){
        Column(){
          Text("0").textAlign(TextAlign.End)
            .width("100%").margin({right:20,top:5})
            .fontSize(26).fontWeight(1).height("50%")
          Text("0").textAlign(TextAlign.End)
            .width("100%").margin({right:20,top:5})
            .fontSize(26).fontWeight(1)
        }.width("100%").height("100%")
      }.borderWidth(5).borderColor("#600f").margin({ left:20,right:20,top:1 })
      .width("100%").height(120)
      Grid(){
        GridItem(){
          Button("MC").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({left:1})
        GridItem(){
          Button("MR").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("MS").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("M+").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("-").type(ButtonType.Normal).fontSize(24)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({ right:5 })
        GridItem(){
          Button("←").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({left:1})
        GridItem(){
          Button("CE").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("C").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("±").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("√").type(ButtonType.Normal).fontSize(24)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({ right:5 })
        GridItem(){
          Button("7").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({left:1})
        GridItem(){
          Button("8").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("9").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("/").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("%").type(ButtonType.Normal).fontSize(24)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({ right:5 })
        GridItem(){
          Button("4").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({left:1})
        GridItem(){
          Button("5").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("6").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("*").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("1/").type(ButtonType.Normal).fontSize(24)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({ right:5 })
        GridItem(){
          Button("1").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({left:1})
        GridItem(){
          Button("2").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("3").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("-").type(ButtonType.Normal).fontSize(22)
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("=").type(ButtonType.Normal).fontSize(24).margin({bottom:20,top:10})
            .borderRadius(10).width("98%").height("75%").backgroundColor("#600f")
        }.margin({ right:5 }).rowStart(4).rowEnd(5)
        GridItem(){
          Button("0").type(ButtonType.Normal).fontSize(22).margin({bottom:20})
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }.margin({left:1}).columnStart(0).columnEnd(1)
        GridItem(){
          Button(".").type(ButtonType.Normal).fontSize(22).margin({bottom:20})
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }
        GridItem(){
          Button("+").type(ButtonType.Normal).fontSize(22).margin({bottom:20})
            .borderRadius(10).width("98%").height("60%").backgroundColor("#600f")
        }


      }.width("100%").height("80%")
      .columnsTemplate("1fr 1fr 1fr 1fr 1fr")
      .rowsTemplate("1fr 1fr 1fr 1fr 1fr 1fr ")
      .columnsGap(5)
    }.width("100%")
  }
}