跳到主要內容跳到主要內容
🚀 影響 Material UI 2025 年的藍圖！參與最新的開發者調查

GridAPI

React Grid 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

示範

Import

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

閱讀關於最小化 bundle 大小的指南，以瞭解差異。

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樣式會應用於根元素。

您可以使用以下其中一種自訂選項覆寫元件的樣式

原始碼

如果您在本頁中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。