跳到主要内容跳到主要内容
🚀 影响 Material UI 2025 年的路线图！参与最新的开发者调查

GridAPI

React Grid 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

import Grid from '@mui/material/Grid';
// or
import { Grid } from '@mui/material';

通过阅读此关于最小化包大小的指南，了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称类型默认值描述
childrennode-

组件的内容。

columnsArray<number>
| number
| object		12

列数。

columnSpacingArray<number
| string>
| number
| object
| string		-

定义 item 类型组件之间的水平间距。它会覆盖 spacing prop 的值。

containerboolfalse

如果为 true，则组件将具有 flex *container* 行为。您应该使用 *container* 包裹 *items*。

direction'column-reverse'
| 'column'
| 'row-reverse'
| 'row'
| Array<'column-reverse'
| 'column'
| 'row-reverse'
| 'row'>
| object		'row'

定义 flex-direction 样式属性。它适用于所有屏幕尺寸。

offsetstring
| number
| Array<string
| number>
| object		-

定义 item 类型组件的偏移值。

rowSpacingArray<number
| string>
| number
| object
| string		-

定义 item 类型组件之间的垂直间距。它会覆盖 spacing prop 的值。

sizestring
| bool
| number
| Array<string
| bool
| number>
| object		-

定义 item 类型组件的尺寸。

spacingArray<number
| string>
| number
| object
| string		0

定义 item 类型组件之间的间距。它只能在 container 类型组件上使用。

wrap'nowrap'
| 'wrap-reverse'
| 'wrap'		'wrap'

定义 flex-wrap 样式属性。它适用于所有屏幕尺寸。

作为 CSS 实用程序，Grid 组件还支持所有 system 属性。您可以直接在组件上将它们用作 props。

ref 被转发到根元素。

主题默认 props

您可以使用 MuiGrid 通过主题更改此组件的默认 props。

CSS 类

这些类名对于使用 CSS 设置样式很有用。当触发特定状态时，它们会应用于组件的插槽。

类名规则名称描述
.MuiGrid-containercontainer如果 container={true}，则应用于根元素的样式。
.MuiGrid-rootroot应用于根元素的样式。

您可以使用以下自定义选项之一来覆盖组件的样式

源代码

如果您在此页面中没有找到所需的信息，请考虑查看组件的实现以获取更多详细信息。