说些废话

    官方文档：容器组件-Grid（基于ArkTS的声明式开发范式）
    没有安装到真机上，直接用预览器看的。创建的是API为8的华为鸿蒙工程。

环境

    DevEco Studio 3.1 Canary1
    SDK 8
    我看的《API参考》更新时间为2022-12-16 17:46

代码

@Entry
@Component
struct Index {
  @State columns: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8]
  build() {
    Row() {
      Column() {
        //不使用循环
        Grid(){
          //Grid的子组件只能为GridItem
          //0
          GridItem(){
            Text(this.columns[0] + '')
              .fontSize(20)
          }
          .backgroundColor('#ff7cbeff')
          .size({
            width:'100%',
            height:'100%'
          })
          //1
          GridItem(){
            Text(this.columns[1] + '')
              .fontSize(20)
          }
          .backgroundColor('#ff7cbeff')
          .columnStart(1)
          .columnEnd(2)
          .size({
            width:'100%',
            height:'100%'
          })
          //2
//          GridItem(){
//            Text(this.columns[2] + '')
//              .fontSize(20)
//          }
//          .backgroundColor('#ff7cbeff')
//          .size({
//            width:'100%',
//            height:'100%'
//          })
          //3
          GridItem(){
            Text(this.columns[3] + '')
              .fontSize(20)
          }
          .backgroundColor('#ff7cbeff')
          .size({
            width:'100%',
            height:'100%'
          })
          //4
          GridItem(){
            Text(this.columns[4] + '')
              .fontSize(20)
          }
          .backgroundColor('#ff7cbeff')
          .rowStart(1)
          .rowEnd(2)
          .size({
            width:'100%',
            height:'100%'
          })
          //5
          GridItem(){
            Text(this.columns[5] + '')
              .fontSize(20)
          }
          .backgroundColor('#ff7cbeff')
          .size({
            width:'100%',
            height:'100%'
          })
          //6
          GridItem(){
            Text(this.columns[6] + '')
              .fontSize(20)
          }
          .backgroundColor('#ff7cbeff')
          .size({
            width:'100%',
            height:'100%'
          })
          //7
//          GridItem(){
//            Text(this.columns[7] + '')
//              .fontSize(20)
//          }
//          .backgroundColor('#ff7cbeff')
//          .size({
//            width:'100%',
//            height:'100%'
//          })
          //8
          GridItem(){
            Text(this.columns[8] + '')
              .fontSize(20)
          }
          .backgroundColor('#ff7cbeff')
          .size({
            width:'100%',
            height:'100%'
          })
        }
        //设置Grid为3列，并且均分
        .columnsTemplate("1fr 1fr 1fr")
        //设置3行，并且均分
        .rowsTemplate("1fr 1fr 1fr")
        //设置列间距为1vp
        .columnsGap(1)
        //设置行间距为1vp
        .rowsGap(1)
        .size({
          width:'100%',
          height:'50%'
        })
        //使用循环
        Grid(){
          //虽然循环的是9个，但是因为合并之后页面上只有7个组件，所以其实是循环到7就行了，
          //多循环了摆在哪里我也不知道，反正用if把合并这个空位GridItem不创建就是空的，无语。
          ForEach(this.columns, (item, index) => {
            //使用ForEach语法循环创建GridItem组件
            GridItem(){
              Text('' + this.columns[index])
                .fontSize(20)
            }
            .columnStart(index == 1 ? 1 : 0)
            .columnEnd(index == 1 ? 2 : 0)
            //原本这个位置应该是和4合并，也因为实际展示的是7个，前面二合一了而此处变成3了。。。
            .rowStart(index == 3 ? 1 : 0)
            .rowEnd(index == 3 ? 2 : 0)
            .backgroundColor('#ffffa57c')
            .size({
              width:'100%',
              height:'100%'
            })
          })
        }
        //设置Grid为3列，并且均分
        .columnsTemplate("1fr 1fr 1fr")
        //设置3行，并且均分
        .rowsTemplate("1fr 1fr 1fr")
        //设置列间距为1vp
        .columnsGap(1)
        //设置行间距为1vp
        .rowsGap(1)
        .size({
          width:'100%',
          height:'50%'
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

展示