# 栅格 Grid

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/grid
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

用于业务中多个子功能的导航。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

用于业务中多个子功能的导航。

## 何时使用

在具有推荐性质较强的页面中作为功能入口使用，例如首页。

## 示例

## Grid

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| columns | 列数 | `number` | - |
| gap | 格子之间的间距 | `number \| string \| [number \| string, number \| string]` | `0` |

### CSS 变量

| 属性             | 说明               | 默认值       | 全局变量 |
| ---------------- | ------------------ | ------------ | -------- |
| --gap            | 间距大小           | `0`          | -        |
| --gap-horizontal | 水平方向的间距大小 | `var(--gap)` | -        |
| --gap-vertical   | 垂直方向的间距大小 | `var(--gap)` | -        |

## Grid.Item

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| onClick | 点击事件 | `(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void` | - |
| span | 跨度 | `number` | `1` |

## FAQ

### Grid 组件的兼容性说明

Grid 组件依赖了 CSS Grid 特性，所以兼容性标准是 iOS Safari >= 10.3 和 Chrome >= 57。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt