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

GridAPI

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

示範

匯入

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

若要瞭解差異，請閱讀此關於最小化套件大小的指南。

Props

原生元件的 Props 也可用。

名稱類型預設值描述
childrennode-

元件的內容。

columnsArray<number>
| number
| object		12

欄的數量。

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

定義 item 類型元件之間的水平間距。它會覆寫 spacing prop 的值。

containerboolfalse

如果 true，元件將具有彈性容器行為。您應該使用容器包裝 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"，則套用至根元素的樣式。

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

原始碼

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