Grid
Used for navigation of multiple sub-functions in the business.
Install
npm install antd-mobile@5.43.0
antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.
Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.
Used for navigation of multiple sub-functions in the business.
When to Use
It is used as a function entry in pages with strong recommendation properties, such as the home page.
Demos
Grid
Props
| Name | Description | Type | Default |
|---|---|---|---|
| columns | The number of columns | number | - |
| gap | Spacing between grids | number | string | [number | string, number | string] | 0 |
CSS Variables
| Name | Description | Default | Global |
|---|---|---|---|
| --gap | The gap between items. | 0 | - |
| --gap-horizontal | The horizontal gap between items. | var(--gap) | - |
| --gap-vertical | The vertical gap between items. | var(--gap) | - |
Grid.Item
Props
| Name | Description | Type | Default |
|---|---|---|---|
| onClick | The click event. | (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | - |
| span | Span | number | 1 |
FAQ
The Grid component uses the CSS Grid feature, so the compatibility standard is iOS Safari >= 10.3 and Chrome >= 57.