Grid
響應式版面配置格線會適應螢幕尺寸和方向，確保版面配置之間的一致性。
Grid 元件適用於已知欄數的版面配置。欄可以使用多個斷點進行配置，以指定每個子項的欄跨度。
運作方式
格線系統是使用 Grid 元件實作的
- 它使用 CSS Flexbox（而非 CSS Grid）以獲得高度彈性。
- 格線永遠是彈性項目。使用
container屬性新增彈性容器。 - 項目寬度以百分比設定，因此它們永遠是流動的，並且尺寸相對於其父元素。
- 有五個預設格線斷點：xs、sm、md、lg 和 xl。如果您需要自訂斷點，請查看自訂斷點格線。
- 您可以為每個斷點提供整數值，以指示當視窗寬度滿足斷點約束時，元件佔用 12 個可用欄中的多少個。
- 它使用
gapCSS 屬性在項目之間新增間距。 - 它不支援列跨度。子元素無法跨越多列。如果您需要此功能，我們建議使用 CSS Grid。
- 它不會自動放置子項。它會嘗試逐一調整子項，如果空間不足，其餘子項將從下一行開始，依此類推。如果您需要自動放置，我們建議改用 CSS Grid。
流動格線
流動格線使用可縮放和調整內容大小的欄。流動格線的版面配置可以使用斷點來判斷版面配置是否需要大幅變更。
基本格線
為了建立格線版面配置，您需要一個容器。使用 container 屬性來建立格線容器，以包裝格線項目（Grid 永遠是一個項目）。
欄寬是介於 1 到 12 之間的整數值。例如，size={6} 的項目佔用格線容器寬度的一半。
多個斷點
項目可以定義多個寬度，導致版面配置在定義的斷點處變更。寬度值適用於所有更寬的斷點，而較大的斷點會覆寫給較小斷點的值。
例如，具有 size={{ xs: 12, sm: 6 }} 的元件在視窗寬度小於 600 像素時，會佔用整個視窗寬度。當視窗超出此尺寸時，元件會佔用總寬度的一半，即六欄而不是 12 欄。
間距
使用 spacing 屬性來控制子項之間的間距。間距值可以是任何正數（包括小數）或字串。此屬性會使用 theme.spacing() 輔助程式轉換為 CSS 屬性。
以下示範說明了 spacing 屬性的用法
<Grid container spacing={2}><Grid
container
direction="row"
sx={{
justifyContent: "center",
alignItems: "center",
}}
>自動版面配置
自動版面配置功能為所有存在的項目提供相等的空間。當您設定一個項目的寬度時，其他項目將自動調整大小以符合它。
可變寬度內容
當斷點的值給定為 "auto" 時，欄的大小將自動調整以符合其內容的寬度。以下示範顯示了其運作方式
巢狀格線
在另一個格線容器內呈現為直接子項的格線容器是巢狀格線，它從頂層繼承其columns 和 spacing。如果它收到頂層格線的屬性，它也將繼承這些屬性。
繼承間距
巢狀格線容器從其父項繼承列和欄間距，除非為實例指定 spacing 屬性。
- 連結 1.1
- 連結 1.2
- 連結 1.3
- 連結 2.1
- 連結 2.2
- 連結 2.3
- 連結 3.1
- 連結 3.2
- 連結 3.3
- 連結 4.1
- 連結 4.2
- 連結 4.3
繼承欄
巢狀格線容器從其父項繼承欄，除非為實例指定 columns 屬性。
欄
使用 columns 屬性來變更格線中的預設欄數 (12)，如下所示
偏移
offset 屬性將項目推送到格線的右側。此屬性接受
- 數字 - 例如，
offset={{ md: 2 }}在視窗尺寸等於或大於md斷點時，將項目向右推兩欄。 "auto"- 這將項目推送到格線容器的最右側。
以下示範說明如何使用偏移屬性
自訂斷點
如果您在主題中指定自訂斷點，則可以在響應式值中使用這些名稱作為格線項目屬性
import { ThemeProvider, createTheme } from '@mui/material/styles';
function Demo() {
return (
<ThemeProvider
theme={createTheme({
breakpoints: {
values: {
laptop: 1024,
tablet: 640,
mobile: 0,
desktop: 1280,
},
},
})}
>
<Grid container spacing={{ mobile: 1, tablet: 2, laptop: 3 }}>
{Array.from(Array(4)).map((_, index) => (
<Grid key={index} size={{ mobile: 6, tablet: 4, laptop: 3 }}>
<div>{index + 1}</div>
</Grid>
))}
</Grid>
</ThemeProvider>
);
}
TypeScript
您必須在主題斷點介面上設定模組擴充。
declare module '@mui/system' {
interface BreakpointOverrides {
// Your custom breakpoints
laptop: true;
tablet: true;
mobile: true;
desktop: true;
// Remove default breakpoints
xs: false;
sm: false;
md: false;
lg: false;
xl: false;
}
}
自訂
置中元素
若要將格線項目的內容置中，請直接在項目上指定 display="flex"。然後使用 justifyContent 和/或 alignItems 來調整內容的位置，如下所示
限制
欄方向
不支援使用 direction="column" 或 direction="column-reverse"。Grid 元件專門設計用於將版面配置細分為欄，而不是列。您不應單獨使用 Grid 元件來垂直堆疊版面配置元素。相反地，您應該在 Grid 內使用 Stack 元件來建立垂直版面配置，如下所示