Grid
Grid can effectively ensure the consistency and logic of the page, strengthen teamwork and unity.
Install
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 | Array<GridRowGutter> | 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 | - | 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 | 0 |
| cols | Number of columns displayed in each row | number | ResponsiveValue | 24 |
| rowGap | The space in row-to-row | number | 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 | 0 |
| span | Number of grids spanned | number | 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
export type GridRowGutter =
| number
| Partial<Record<GridResponsiveBreakpoint, number>>;
FlexType
export type FlexType = string | number | "auto" | "none";
