1. 基本概念

如下图所示，这个一个Grid网格组件，每一个网格项是GridItem。

2. 基本使用

Gird的使用和List使用步骤基本一样，按照下面三个步骤几个完成

1. 定义网格项数据模型：也就是每一个GridItem要显示那些数据
2. 创建网格项组件与数据模型绑定：也就是每一个GridItem中有哪些组件组成，以及组件中显示什么数据。
3. 准备数据集，循环渲染到Grid容器中

2.1. 创建网格项数据模型

每一个网格项GridItem包含的数据有：图片、标题、二级标题，将这些数据封装为数据模型。

//1.网格项数据模型
class GridItemData {
  title: string
  secondTitle: string
  img: Resource

  constructor(title: string, secondTitle: string, img: Resource) {
    this.title = title;
    this.secondTitle = secondTitle;
    this.img = img;
  }
}

2.2. 创建网格项组件

创建网格项组件，并与网格项数据模型绑定

@Entry
@Component
struct Index {
  //2. 创建网格项组件
  @Builder
  gridItem(item: GridItemData) {
    Column() {
      Text(item.title)
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
      Text(item.secondTitle)
        .fontSize(12)
        .fontColor('#99182431')
        .margin({ top: 4 })
    }.alignItems(HorizontalAlign.Start)
  }

  build(){
    //...
  }
}

2.3. 循环渲染网格项数据

接下来创建Grid数据集，并循环渲染到Grid容器。

//1.网格项数据模型...
@Entry
@Component
struct Index {
  //2. 创建网格项组件...
  
  //3.创建Grid数据集，并循环渲染到Grid容器
  gridItemData: GridItemData[] = [
    new GridItemData('排行榜', '厦门站，我们不见不散', $r('app.media.top')),
    new GridItemData('新品发布', '厦门站，我们部件不散', $r('app.media.new')),
    new GridItemData('打牌闪购', '更多大牌', $r('app.media.brand')),
    new GridItemData('发现好物', '厦门站，我们不见不散', $r('app.media.found')),
  ]

  build() {
    Column() {
      Grid() {
        ForEach(this.gridItemData, (item: GridItemData) => {
          GridItem() {
            this.gridItem(item)
          }
          .padding({ top: 8, left: 8 })
          .align(Alignment.TopStart)
          .backgroundImage(item.img)
          .backgroundImageSize(ImageSize.Cover) //背景图、居中填充
          .borderRadius(12)
          .width('100%')
          .height('100%')
        })
      }
      .width('100%')
      .height(260)
      .columnsTemplate('1fr 1fr')		//网格2列
      .rowsTemplate('1fr 1fr')			//网格2行
      .columnsGap(8)								//列间距8
      .rowsGap(8)										//行间距8
    }.margin({
      left: 12, right: 12
    })
  }
}