开发者你好，控制子组件不超过父组件的范围可以给父组件设备clip属性或者控制子组件的高度，若是都不满足您的需求，还请提供下您这边的可以复现问题的demo以便分析。

【背景知识】

• rowsTemplate属性、columnsTemplate属性：设置当前网格布局行、列的数量。参数为’1fr 1fr 1fr’字符串形式，代表均分为3行或3列，不设置时默认1行或1列。
• maxcount属性、minCount属性：设置Grid组件能显示的最大或最小行列数。
• cellLength属性：可设置1行的高度或1列的宽度。
• layoutDirection属性：可设置布局的主轴方向。

【解决方案】 给父组件设置裁剪属性clip，并设置值为true，该属性可用于设置是否对子组件超出当前组件范围外的区域进行裁剪。可参考官网链接：clip。子组件的实际显示可以超出父组件范围的原因是：图层是叠加显示的，子视图宽高均可超过父视图，一些操作系统平台默认设置剪裁，Harmony OS平台设置默认不剪裁。

Grid组件高度自适应：

当Grid组件不设置height、width属性或者设置为auto时，会自适应GridItem的总高度和总宽度。

1. 可通过maxcount属性、minCount属性设置最大最小行列数。
2. 通过cellLength属性设置行列的宽高。

提示：

1. maxcount属性、minCount属性、cellLength属性的行列控制变换由layoutDirection属性决定。
2. 当Grid组件的rowsTemplate属性、columnsTemplate属性都不设置时，layoutDirection属性、cellLength属性、maxcount属性、minCount属性才可生效。

示例代码如下：

@Entry
@Component
struct GridExample {
  @State numbers: string[] = []
  @State rowMaxCount: number = 5
  @State cellHeight: number = 50
  @State itemNumber: number = 30

  aboutToAppear() {
    for (let i = 1; i <= 30; i++) {
      this.numbers.push(i.toString())
    }
  }

  build() {
    Scroll() {
      Column({ space: 5 }) {
        Text('修改一行最大显示个数+1')
          .fontSize(15)
          .onClick(() => {
            // 当单行最大的个数超出屏幕宽度时，即使最大个数增加也不会改变布局
            this.rowMaxCount += 1
          })
        Text('修改一行最大显示个数-1')
          .fontSize(15)
          .onClick(() => {
            // 避免单行最大个数小于最小个数，该示例一行最小设置两个GridItem
            if (this.rowMaxCount > 2) {
              this.rowMaxCount -= 1
            }
          })
        Text('修改一行行高-10')
          .fontSize(15)
          .onClick(() => {
            this.cellHeight -= 10
          })
        Text('修改一行行高+10')
          .fontSize(15)
          .onClick(() => {
            this.cellHeight += 10
          })
        Text('增加Item个数')
          .fontSize(15)
          .onClick(() => {
            this.itemNumber += 1
            this.numbers.push(this.itemNumber.toString())
          })
        Grid() {
          ForEach(this.numbers, (day: string) => {
            GridItem() {
              Text(day)
                .fontSize(16)
            }
            .width(40)
            .height(40)
            .borderWidth(2)
            .borderColor(Color.Black)
          }, (day: string) => day)
        }
        .columnsGap(5)
        .rowsGap(5)
        .backgroundColor(0xAFEEEE)
        .maxCount(this.rowMaxCount) // GridDirection.Row的模式下，该属性表示一行最多放置的个数
        .minCount(2) // GridDirection.Row的模式下，该属性表示一行最少放置的个数，本示例为两个
        .cellLength(this.cellHeight) // GridDirection.Row的模式下，该属性行高
        .layoutDirection(GridDirection.Row) // 横向布局，先一行占满后再排下一行
      }
      .width('100%')
      .margin({ top: 5 })
      .align(Alignment.Center)
    }
  }
}

背景知识：

• Grid未设置固定高度

  当Grid未显式设置height属性时，默认会继承父组件高度1。若父容器高度不足且Grid内容超出，会导致滚动时子项溢出父容器边界。

• 布局计算逻辑冲突

  Grid的行列模板（如rowsTemplate或columnsTemplate）未正确适配父容器尺寸，或子项尺寸未被动态计算，导致内容溢出。

• 滚动容器嵌套问题

  Grid自身不具备滚动能力，若将其嵌套在Scroll等滚动容器中且未正确控制布局层级，可能引发尺寸计算异常。

问题解决：

1. 显式设置Grid高度

通过动态计算Grid高度确保其适配父容器。例如根据子项数量计算总高度：

@Entry
@Component
struct Example {
  data: string[] = ['Item1', 'Item2', 'Item3', 'Item4', 'Item5'];
  
  // 计算Grid总高度：假设每行高度100vp，总行数向上取整
  getGridHeight() {
    const rows = Math.ceil(this.data.length / 2); // 每行2列
    return rows * 100;
  }

  build() {
    Column() {
      Grid() {
        ForEach(this.data, (item: string) => {
          GridItem() {
            Text(item).height(100).width('100%')
          }
        })
      }
      .columnsTemplate('1fr 1fr') // 每行两列均分宽度
      .height(this.getGridHeight()) // 动态设置高度
    }
  }
}

2. 使用List替代Grid实现自适应

若Grid无法满足需求，可改用List组件并设置lanes属性实现分列布局，自动撑高父容器：

List({ space: 10 }) {
  ForEach(this.data, (item: string) => {
    ListItem() {
      Text(item).height(100).width('100%')
    }
  })
}
.lanes(2) // 两列布局
.alignListItem(ListItemAlign.Center)

3. 控制父容器约束

确保父容器高度足够且无溢出限制。例如通过Scroll包裹Grid并设置高度约束：

Scroll() {
  Grid() {
    // 子项内容
  }
  .columnsTemplate('1fr 1fr')
}
.height('100%') // 父容器高度占满可用空间