HarmonyOS 鸿蒙Next中栅格布局GridCol这里有办法可以对齐吗？

当前栅格布局中确实没有很直接的方式来解决这个对齐的问题，这里只能自己手动适配
通过监听当前断点的类型变化，来讲对应的GridCol进行offset偏移
请参考代码：

// xxx.ets
@Entry
@Component
struct GridRowExample {
  @State currentBp: string = 'unknown'

  build() {
    Column() {
      GridRow({
        columns: 2,
        gutter: { x: 5, y: 10 },
        breakpoints: {
          value: ["400vp", "600vp", "800vp"],
          reference: BreakpointsReference.WindowSize
        },
        direction: GridRowDirection.Row
      }) {
        //1
        GridCol({
          span: {
            xs: 1,
            sm: 2
          },
          offset: 0,
          order: 1
        }) {
          Row()
            .width("100%").height("20vp")
        }
        .borderColor(Color.Red)
        .borderWidth(2)

        //2
        GridCol({
          span: {
            xs: 1,
            sm: 2
          },
          offset: 0,
          order: 2
        }) {
          Row().width("100%").height("60vp")
        }.borderColor(Color.Yellow).borderWidth(2)

        //3
        GridCol({
          span: {
            xs: 1,
            sm: 2
          },
          offset: 0,
          order: 3
        }) {
          Row().width("100%").height("20vp")
        }.borderColor(Color.Green).borderWidth(2)
        .offset({ y: this.currentBp == 'xs' ? -40 : 0 })

        //4
        GridCol({
          span: {
            xs: 1,
            sm: 2
          },
          offset: 0,
          order: 4
        }) {
          Row().width("100%").height("40vp")
        }.borderColor(Color.Blue).borderWidth(2)
      }.width("100%").height("100%")
      //.alignItems(ItemAlign.Start)
      .onBreakpointChange((breakpoint) => {
        console.log('hmLog-->', breakpoint)
        this.currentBp = breakpoint
      })
    }
    .width('80%')
    .margin({ left: 10, top: 5, bottom: 5 })
    .height(200)
    .border({ color: '#880606', width: 2 })
    .backgroundColor('#000')
  }
}