栅格 Grid
栅格可以有效的保证页面的一致性、逻辑性、加强团队协作和统一。
安装
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 | Array<GridRowGutter> | 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 | - | 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 | 0 |
| cols | 每一行展示的列数 | number | ResponsiveValue | 24 |
| rowGap | 行与行之间的间距 | number | ResponsiveValue | 0 |
| style | 节点样式 | CSSProperties | - |
GridItem
| 参数名 | 描述 | 类型 | 默认值 |
|---|
| suffix | 是否是后缀元素 | boolean | false |
| className | 节点类名 | string | string[] | - |
| offset | 左侧的间隔格数 | number | ResponsiveValue | 0 |
| span | 跨越的格数 | number | 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
export type GridRowGutter =
| number
| Partial<Record<GridResponsiveBreakpoint, number>>;
FlexType
export type FlexType = string | number | "auto" | "none";
