# Grid

- Page: https://jiguang132.com/resources/arco-design/docs/grid
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Grid can effectively ensure the consistency and logic of the page, strengthen teamwork and unity.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: The basic usage of Grid.
- **Offset of Col**: Specify `offset` to justify the padding of Col.
- **Push pull**: Specify `push` or `pull` to sort the grid.
- **Interval of Grid**: By specifying `gutter` on `Row`, the area interval of the grid can be changed.
- **Horizontal layout**: Use `justify` to customize horizontal layout.
- **Vertical layout**: Use `align` to customize vertical layout.
- **Order**: Sort items by `order`.
- **Responsive layout**: Six preset sizes are available: `xs`, `sm`, `md`, `lg`, `xl` and `xxl`.
- **Advanced responsive layout**: The `span`, `offset`, `order`, , `pull`, `push` properties can be used in `xs`, `sm`, `md`, `lg`, `xl`, `xxl` objects. For example, `xs={8}` is equivalent to `xs={{ span: 8 }}`.
- **Flex**: By setting the `flex` property of the `Col` component, you can configure the flex layout arbitrarily.
- **Grid Layout**: A layout component implemented by CSS-based Grid layout, supports folding, and can set suffix nodes, which will always be displayed at the end of a line.
- **Responsive Grid Layout**: The responsive configuration format of the Grid component is `{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6, xxxl: 7 }`.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Row

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|div|If true, `<Row>` and `<Col>` will be treated as a div without any Grid related classes and styles|boolean |`-`|-|
|align|Vertical alignment, same as css `align-items`|'start' \| 'center' \| 'end' \| 'stretch' |`start`|-|
|justify|Horizontal alignment, same as css `justify-content`|'start' \| 'center' \| 'end' \| 'space-around' \| 'space-between' |`start`|-|
|className|Additional css class|string \| string[] |`-`|-|
|gutter|Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}.Or you can use array to make horizontal and vertical spacing work at the same time [horizontal, vertical]|[GridRowGutter](#gridrowgutter) \| Array&lt;[GridRowGutter](#gridrowgutter)&gt; |`0`|vertical gutter in 2.5.0|
|style|Additional style|CSSProperties |`-`|-|

### Col

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|offset|The number of cells to offset Col from the left|number |`-`|-|
|order|Raster order|number |`-`|-|
|pull|Raster order|number |`-`|2.20.0|
|push|Raster order|number |`-`|2.20.0|
|span|Raster number of cells to occupy|number |`24`|-|
|className|Additional css class|string \| string[] |`-`|-|
|flex|Set flex layout properties|[FlexType](#flextype) |`-`|2.26.0|
|lg|`screen >= 992px`|number \| { [key: string]: any } |`-`|-|
|md|`screen >= 768px`|number \| { [key: string]: any } |`-`|-|
|sm|`screen >= 576px`|number \| { [key: string]: any } |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|xl|`screen >= 1200px`|number \| { [key: string]: any } |`-`|-|
|xs|`screen < 576px`|number \| { [key: string]: any } |`-`|-|
|xxl|`screen >= 1600px`|number \| { [key: string]: any } |`-`|-|
|xxxl|`screen >= 2000px`|number \| { [key: string]: any } |`-`|2.40.0|

### Grid

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|collapsed|Whether to collapsed|boolean |`false`|
|collapsedRows|Number of rows displayed when collapsed|number |`1`|
|className|Additional css class|string \| string[] |`-`|
|colGap|The space in column-to-column|number \| [ResponsiveValue](grid#responsivevalue) |`0`|
|cols|Number of columns displayed in each row|number \| [ResponsiveValue](grid#responsivevalue) |`24`|
|rowGap|The space in row-to-row|number \| [ResponsiveValue](grid#responsivevalue) |`0`|
|style|Additional style|CSSProperties |`-`|

### GridItem

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|suffix|Is it a suffix element|boolean |`false`|
|className|Additional css class|string \| string[] |`-`|
|offset|Number of grids on the left|number \| [ResponsiveValue](grid#responsivevalue) |`0`|
|span|Number of grids spanned|number \| [ResponsiveValue](grid#responsivevalue) |`1`|
|style|Additional style|CSSProperties |`-`|

### ResponsiveValue

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|lg|>= 992px responsive configuration|number |`-`|
|md|>= 768px responsive configuration|number |`-`|
|sm|>= 576px responsive configuration|number |`-`|
|xl|>= 1200px responsive configuration|number |`-`|
|xs|< 576px responsive configuration|number |`-`|
|xxl|>= 1600px responsive configuration|number |`-`|
|xxxl|`screen >= 2000px`|number |`-`|

### GridRowGutter

```js
export type GridRowGutter =
  | number
  | Partial<Record<GridResponsiveBreakpoint, number>>;
```

### FlexType

```js
export type FlexType = string | number | "auto" | "none";
```

---

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