# grid-view

> 基础库 2.29.0 开始支持，低版本需做[兼容处理](1003706)。

> 相关文档: [Skyline 渲染引擎](/miniprogram/dev/framework/runtime/skyline/introduction.md)、[Skyline 迁移起步](/miniprogram/dev/framework/custom-component/glass-easel/migration.md)

渲染框架支持情况：Skyline （使用最新 [Nightly](/miniprogram/dev/devtools/nightly.html) 工具调试）

## 功能描述

Skyline 下网格布局容器 和 瀑布流布局容器。基础库版本 2.30.4 起提供 WebView 兼容实现。

1. 仅支持作为 `<scroll-view type="custom">` 模式的直接子节点
2. 按需渲染节点，比 WebView 兼容实现具备更好的性能。

## 通用属性


```json
[
  {
    "属性": "type",
    "类型": "string",
    "默认值": "aligned",
    "必填": "是",
    "说明": "布局方式",
    "最低版本": "",
    "子项": [
      {
        "合法值": "aligned",
        "说明": "每行高度由同一行中最大高度子节点决定"
      },
      {
        "合法值": "masonry",
        "说明": "瀑布流，根据子元素高度自动布局"
      }
    ]
  },
  {
    "属性": "cross-axis-count",
    "类型": "number",
    "默认值": "2",
    "必填": "否",
    "说明": "交叉轴元素数量",
    "最低版本": ""
  },
  {
    "属性": "max-cross-axis-extent",
    "类型": "number",
    "默认值": "0",
    "必填": "否",
    "说明": "交叉轴元素最大范围",
    "最低版本": ""
  },
  {
    "属性": "main-axis-gap",
    "类型": "number",
    "默认值": "0",
    "必填": "否",
    "说明": "主轴方向间隔",
    "最低版本": ""
  },
  {
    "属性": "cross-axis-gap",
    "类型": "number",
    "默认值": "0",
    "必填": "否",
    "说明": "交叉轴方向间隔",
    "最低版本": ""
  },
  {
    "属性": "padding",
    "类型": "Array",
    "默认值": "[0, 0, 0, 0]",
    "必填": "否",
    "说明": "长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距",
    "最低版本": "[3.0.0](1003706)"
  }
]
```

## 示例代码

[在开发者工具中预览效果](https://developers.weixin.qq.com/s/hc924ymg7OMi)

## Tip

在 WebView 下且 `type="masonry"` 时，grid-view 的子元素：
1. 需具有可见的宽高（`clientWidth` 和 `clientHeight`）。例如：
设置 `display: block` 属性；
使用 image 组件时，应当手动指定高度或设置 `mode="widthFix"`。
2. 若使用 `padding`、`margin` 等影响盒模型的CSS属性，需同时设置 `box-sizing: border`。
3. 仅针对在末尾增删元素做优化，尽量避免在中间插入子元素。
4. 子节点过多时仍会影响布局性能。对性能敏感的场景，建议使用 Skyline 对应组件。