鸿蒙中的Grid布局类似于前端中的栅格布局

4.0 Grid 文档中心

在Grid组件中只能放GridItem组件

@Entry
@Component
struct GridCase {build() {Grid() {GridItem() {GridCaseItem()}GridItem() {GridCaseItem()}GridItem() {GridCaseItem()}GridItem() {GridCaseItem()}}.width('100%').height('100%').columnsTemplate('1fr 1fr')  //设置文本 放置两列.columnsGap(10) //每列的距离.rowsGap(10)  // 每行的距离.padding(10)}
}// 组件名唯一 不然会报错
@Component
struct GridCaseItem {build() {Row() {Column() {Text('南店').fontSize(30).fontColor(Color.White)}.width('100%')}.height(210).borderRadius(4).backgroundColor(Color.Orange)}
}

想要增加 行 列 

只需要更改 

.columnsTemplate('3fr 3fr 3fr')