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

GridAPI

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

演示

导入

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

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

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-direction-xs-columndirection-xs-column如果 direction="column"，则样式应用于根元素。
.MuiGrid-direction-xs-column-reversedirection-xs-column-reverse如果 direction="column-reverse"，则样式应用于根元素。
.MuiGrid-direction-xs-row-reversedirection-xs-row-reverse如果 direction="row-reverse"，则样式应用于根元素。
.MuiGrid-rootroot样式应用于根元素。
.MuiGrid-wrap-xs-nowrapwrap-xs-nowrap如果 wrap="nowrap"，则样式应用于根元素。
.MuiGrid-wrap-xs-wrap-reversewrap-xs-wrap-reverse如果 wrap="reverse"，则样式应用于根元素。

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

源代码

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