#鸿蒙学习大百科#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%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.