# Grid

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/grid
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Used for navigation of multiple sub-functions in the business.

## Install

```bash
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.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt