#鸿蒙学习大百科#GridRow如何适配sm，md，lg三种尺寸的设备？

@Entry
@Component
struct Index {
  @State bgColors: Color[] =
    [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
  build() {
    Column() {
      GridRow({
        columns: {
          //GridRow在sm设备中占4个格栅，在md设备中占8个格栅，在lg设备中占12个格栅
          sm: 4,
          md: 8,
          lg: 12
        },
      }) {
        ForEach(this.bgColors, (color: Color, index?: number | undefined) => {
          //每个Item在各种设备中都占有2个格栅
          GridCol({
            span: {
              sm: 2,
              md: 2,
              lg: 2
            }
          }) {
            Row() {
              Text(`${index}`)
            }.width('100%').height('50vp')
          }
          .backgroundColor(color)
        })
      }.backgroundColor(Color.White)
      .height("100%")
    }
    .height('100%')
    .width('100%')
  }
}