網格版本 2
響應式佈局網格會根據螢幕大小和方向調整，確保佈局的一致性。
Grid 組件適用於已知欄數的佈局。可以使用多個斷點來配置欄，以指定每個子元素的欄跨度。
運作方式
網格系統是使用 Grid 組件實作的
- 它使用 CSS Flexbox（而不是 CSS Grid）以實現高度彈性。
- 網格始終是一個彈性項目。使用
container屬性新增彈性容器。 - 項目寬度以百分比設定，因此它們始終是流動的，並且大小相對於其父元素。
- 有五個預設網格斷點：xs、sm、md、lg 和 xl。如果您需要自訂斷點，請查看自訂斷點網格。
- 您可以為每個斷點賦予整數值，以指示當視窗寬度滿足斷點限制時，組件佔用了 12 個可用欄中的多少個。
- 它使用
gapCSS 屬性來新增項目之間的間距。 - 它不支援列跨度。子元素不能跨越多列。如果您需要此功能，我們建議使用 CSS Grid。
- 它不會自動放置子元素。它會嘗試逐一調整子元素，如果沒有足夠的空間，則其餘的子元素將從下一行開始，依此類推。如果您需要自動放置，我們建議改用 CSS Grid。
流動網格
流動網格使用可縮放和調整內容大小的欄。流動網格的佈局可以使用斷點來判斷佈局是否需要大幅變更。
基本網格
為了建立網格佈局，您需要一個容器。使用 container 屬性建立一個網格容器，該容器包裝網格項目 (Grid 始終是一個項目)。
欄寬是介於 1 和 12 之間的整數值。例如，size={6} 的項目佔據網格容器寬度的一半。
多個斷點
項目可以定義多個寬度，導致佈局在定義的斷點處變更。寬度值會套用至所有較寬的斷點，並且較大的斷點會覆蓋給較小斷點的值。
例如，當視窗寬度 小於 600 像素時，具有 size={{ xs: 12, sm: 6 }} 的組件會佔據整個視窗寬度。當視窗大小超出此大小時，組件會佔據總寬度的一半，即六欄而不是 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"—這會將項目推送到網格容器的最右側。
下面的範例示範如何使用 offset 屬性
自訂斷點
如果您在主題中指定自訂斷點，則可以使用這些名稱作為響應式值的網格項目屬性
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 來調整內容的位置，如下所示
