# 栅格 Grid

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/grid
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

栅格可以有效的保证页面的一致性、逻辑性、加强团队协作和统一。

## 安装

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

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基本用法**：展示了最基本的 24 等分应用。
- **栅格偏移**：指定 `offset` 可以对栅格进行平移操作。
- **栅格排序**：指定 `push` 或者 `pull` 可以对栅格进行排序。
- **区块间隔**：通过在 `Row` 上指定 `gutter` 可以增加栅格的区域间隔。
- **水平布局**：通过 `justify` 来进行水平布局。
- **垂直布局**：通过 `align` 来进行垂直布局。
- **排序**：通过 `order` 来进行元素排序。
- **响应式布局**：预置六种响应尺寸, 分别为 `xs`, `sm`, `md`, `lg`, `xl`, `xxl`。
- **其他属性的响应式**：`span`, `offset`, `order`, `pull`, `push` 属性可以内嵌到 `xs`, `sm`, `md`, `lg`, `xl`, `xxl` 对象中使用。 比如 `xs={8}` 相当于 `xs={{ span: 8 }}`。
- **Flex 用法**：通过设置 `Col` 组件的 `flex` 属性，可以任意配置 flex 布局。
- **Grid 布局**：基于 CSS 的 Grid 布局实现的布局组件，支持折叠，并且可以设置后缀节点，后缀节点会显示在一行的结尾。
- **响应式的 Grid 布局**：Grid 组件的响应式配置格式为 `{ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6, xxxl: 7 }`。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Row

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|div|开启这个选项 `<Row>` 和 `<Col>` 都会被当作 div 而不会附带任何 Grid 相关的类和样式|boolean |`-`|-|
|align|竖直对齐方式 ( `align-items` )|'start' \| 'center' \| 'end' \| 'stretch' |`start`|-|
|justify|水平对齐方式 (`justify-content`)|'start' \| 'center' \| 'end' \| 'space-around' \| 'space-between' |`start`|-|
|className|节点类名|string \| string[] |`-`|-|
|gutter|栅格间隔，单位是`px` 栅格间隔。可传入响应式对象写法 { xs: 4, sm: 6, md: 12}，传入数组 [ 水平间距， 垂直间距 ] 来设置两个方向。|[GridRowGutter](#gridrowgutter) \| Array&lt;[GridRowGutter](#gridrowgutter)&gt; |`0`|vertical gutter in 2.5.0|
|style|节点样式|CSSProperties |`-`|-|

### Col

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|offset|栅格左侧的间隔格数，间隔内不可以有栅格|number |`-`|-|
|order|对元素进行排序|number |`-`|-|
|pull|对元素进行排序|number |`-`|2.20.0|
|push|对元素进行排序|number |`-`|2.20.0|
|span|栅格占位格数|number |`24`|-|
|className|节点类名|string \| string[] |`-`|-|
|flex|设置 flex 布局属性|[FlexType](#flextype) |`-`|2.26.0|
|lg|>= 992px 响应式栅格|number \| { [key: string]: any } |`-`|-|
|md|>= 768px 响应式栅格|number \| { [key: string]: any } |`-`|-|
|sm|>= 576px 响应式栅格|number \| { [key: string]: any } |`-`|-|
|style|节点样式|CSSProperties |`-`|-|
|xl|>= 1200px 响应式栅格|number \| { [key: string]: any } |`-`|-|
|xs|< 576px 响应式栅格|number \| { [key: string]: any } |`-`|-|
|xxl|>= 1600px 响应式栅格|number \| { [key: string]: any } |`-`|-|
|xxxl|>= 2000px 响应式栅格|number \| { [key: string]: any } |`-`|2.40.0|

### Grid

|参数名|描述|类型|默认值|
|---|---|---|---|
|collapsed|是否折叠|boolean |`false`|
|collapsedRows|折叠时显示的行数|number |`1`|
|className|节点类名|string \| string[] |`-`|
|colGap|列与列之间的间距|number \| [ResponsiveValue](grid#responsivevalue) |`0`|
|cols|每一行展示的列数|number \| [ResponsiveValue](grid#responsivevalue) |`24`|
|rowGap|行与行之间的间距|number \| [ResponsiveValue](grid#responsivevalue) |`0`|
|style|节点样式|CSSProperties |`-`|

### GridItem

|参数名|描述|类型|默认值|
|---|---|---|---|
|suffix|是否是后缀元素|boolean |`false`|
|className|节点类名|string \| string[] |`-`|
|offset|左侧的间隔格数|number \| [ResponsiveValue](grid#responsivevalue) |`0`|
|span|跨越的格数|number \| [ResponsiveValue](grid#responsivevalue) |`1`|
|style|节点样式|CSSProperties |`-`|

### ResponsiveValue

|参数名|描述|类型|默认值|
|---|---|---|---|
|lg|>= 992px 响应式配置|number |`-`|
|md|>= 768px 响应式配置|number |`-`|
|sm|>= 576px 响应式配置|number |`-`|
|xl|>= 1200px 响应式配置|number |`-`|
|xs|< 576px 响应式配置|number |`-`|
|xxl|>= 1600px 响应式配置|number |`-`|
|xxxl|>= 2000px 响应式栅格|number |`-`|

### GridRowGutter

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

### FlexType

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

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt