Grid实现单双列展示，谁有好的方案吗？

@Entry 
@Component 
struct GridExample1 { 
  @State numbers: string[] = [] 
  
  @State inputValue: string = 'click me' 
  @State columnsTemplateStr: string = '2fr 2fr' 
  @State widthNum: string = '50%' 
  aboutToAppear() { 
    for (let i = 1;i <= 5; i++) { 
      this.numbers.push(i + '') 
    } 
  } 
  
  build() { 
    Column({space:5}) { 
      Button(this.inputValue) 
        .onClick(() => { 
          if(this.columnsTemplateStr == '2fr' && this.widthNum == '100%'){ 
            this.columnsTemplateStr = '2fr 2fr' 
            this.widthNum = '50%' 
          }else{ 
            this.columnsTemplateStr = '2fr' 
            this.widthNum = '100%' 
          } 
        }).backgroundColor(0x317aff) 
      Grid() { 
        ForEach(this.numbers, (day: string) => { 
          GridItem() { 
            Text(day) 
              .fontSize(16) 
              .backgroundColor('#36D') 
              .width(this.widthNum) 
                // .width(130) 
              .height(80) 
              .textAlign(TextAlign.Center) 
          } 
          .selected(true) 
          .hitTestBehavior(HitTestMode.Transparent) 
          .onTouch((event?: TouchEvent) => { 
            console.log(`dzy>onTouch>item: ${day}, event.type: ${event.type}`) 
          }) 
        }) 
      } 
      // .columnsTemplate('2fr 2fr') 
      .columnsTemplate(this.columnsTemplateStr) 
      .columnsGap(10) 
      .rowsGap(10) 
      .width('90%') 
      .backgroundColor('#bfc') 
      .height('100%') 
      .multiSelectable(true) 
    }.width('100%').margin({ top: 5 }) 
  } 
}