栅格 Grid
用于业务中多个子功能的导航。
安装
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。