Grid

響應式佈局網格會根據螢幕尺寸和方向調整，確保佈局之間的一致性。

Grid 組件適用於具有已知欄位的佈局。欄位可以在多個斷點中配置，您必須在這些斷點中指定每個子項的欄位跨度。

運作方式

網格系統是使用 Grid 組件實作的

它使用 CSS 的彈性盒模型，以實現高度的彈性。
網格始終是一個彈性項目。使用 container 屬性為其添加彈性容器。
項目寬度以百分比設定，因此它們始終是流動的，並且尺寸相對於其父元素。
有五個預設的網格斷點：xs、sm、md、lg 和 xl。如果您需要自訂斷點，請查看自訂斷點網格。
可以為每個斷點提供整數值，指示當視窗寬度滿足斷點約束時，組件佔用 12 個可用欄位中的多少個。
它沒有列的概念。也就是說，您無法讓子項跨越多列。如果您需要這樣做，我們建議改用 CSS Grid。
它不提供自動放置子項功能。它會嘗試逐一放置子項，如果空間不足，其餘子項將從下一行開始，依此類推。如果您需要自動放置功能，我們建議改用 CSS Grid。

流動網格

流動網格使用可縮放和調整內容大小的欄位。流動網格的佈局可以使用斷點來判斷佈局是否需要大幅變更。

基本網格

為了建立網格佈局，您需要一個容器。使用 container 屬性來建立一個網格容器，以包裹網格項目 (Grid 始終是一個項目)。

欄位寬度是介於 1 到 12 之間的整數值。例如，size={6} 的項目佔用網格容器寬度的一半。

size=8

size=4

size=8

<Grid container spacing={2}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={4}>
    <Item>size=4</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>

按下 Enter 開始編輯

多個斷點

組件可以定義多個寬度，導致佈局在定義的斷點處變更。給較大斷點的寬度值會覆蓋給較小斷點的寬度值。

例如，當視窗寬度為600 像素或更大時，size={{ xs: 12, sm: 6 }} 會將組件的大小調整為佔用視窗寬度的一半 (6 欄)。對於較小的視窗，組件會填滿所有 12 個可用欄位。

xs=6 md=8

xs=6 md=4

xs=6 md=8

<Grid container spacing={2}>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 4 }}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid size={{ xs: 6, md: 8 }}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>

按下 Enter 開始編輯

間距

若要控制子項之間的空間，請使用 spacing 屬性。間距值可以是任何正數，包括小數和任何字串。此屬性使用 theme.spacing() 輔助程式轉換為 CSS 屬性。

行 & 欄間距

rowSpacing 和 columnSpacing 屬性允許獨立指定行和欄間隙。它類似於 CSS Grid 的 row-gap 和 column-gap 屬性。

<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
  <Grid size={6}>
    <Item>1</Item>
  </Grid>
  <Grid size={6}>
    <Item>2</Item>
  </Grid>
  <Grid size={6}>
    <Item>3</Item>
  </Grid>
  <Grid size={6}>
    <Item>4</Item>
  </Grid>
</Grid>

<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
  <Grid size={6}>
    <Item>1</Item>
  </Grid>
  <Grid size={6}>
    <Item>2</Item>
  </Grid>
  <Grid size={6}>
    <Item>3</Item>
  </Grid>
  <Grid size={6}>
    <Item>4</Item>
  </Grid>
</Grid>

按下 Enter 開始編輯

響應式值

您可以根據活動斷點切換屬性的值。例如，我們可以實作 Material Design 的建議的響應式佈局網格。

<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
  {Array.from(Array(6)).map((_, index) => (
    <Grid key={index} size={{ xs: 2, sm: 4 }}>
      <Item>{index + 1}</Item>
    </Grid>
  ))}
</Grid>

<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
  {Array.from(Array(6)).map((_, index) => (
    <Grid key={index} size={{ xs: 2, sm: 4 }}>
      <Item>{index + 1}</Item>
    </Grid>
  ))}
</Grid>

按下 Enter 開始編輯

響應式值由以下屬性支援

size
columns
columnSpacing
direction
rowSpacing
間距
offset
MUI System 的所有其他屬性

自動佈局

自動佈局使項目公平地共享可用空間。這也表示您可以設定一個項目的寬度，而其他項目將自動調整大小以配合。

size=grow

size=6

size=grow

<Grid container spacing={3}>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
  <Grid size={6}>
    <Item>size=6</Item>
  </Grid>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
</Grid>

<Grid container spacing={3}>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
  <Grid size={6}>
    <Item>size=6</Item>
  </Grid>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
</Grid>

按下 Enter 開始編輯

可變寬度內容

將 size 斷點屬性之一設定為 "auto"，以根據其內容的寬度調整欄位的大小。

size=auto

size=6

size=grow

<Grid container spacing={3}>
  <Grid size="auto">
    <Item>size=auto</Item>
  </Grid>
  <Grid size={6}>
    <Item>size=6</Item>
  </Grid>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
</Grid>

<Grid container spacing={3}>
  <Grid size="auto">
    <Item>size=auto</Item>
  </Grid>
  <Grid size={6}>
    <Item>size=6</Item>
  </Grid>
  <Grid size="grow">
    <Item>size=grow</Item>
  </Grid>
</Grid>

按下 Enter 開始編輯

巢狀網格

在另一個網格容器內呈現的網格容器是一個巢狀網格，它繼承了頂層的columns 和 spacing。深層巢狀網格將從上層巢狀網格繼承屬性 (如果它接收到這些屬性的話)。

電子郵件訂閱區塊

類別 A

連結 1.1
連結 1.2
連結 1.3

類別 B

連結 2.1
連結 2.2
連結 2.3

類別 C

連結 3.1
連結 3.2
連結 3.3

類別 D

連結 4.1
連結 4.2
連結 4.3

連結 A

連結 B

連結 C

欄位

您可以使用 columns 屬性變更預設的欄位數 (12)。

size=8

<Grid container spacing={2} columns={16}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2} columns={16}>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
  <Grid size={8}>
    <Item>size=8</Item>
  </Grid>
</Grid>

按下 Enter 開始編輯

偏移量

使用 offset 屬性將項目向右移動，它可以是

數字，例如，offset={{ md: 2 }} - 使用時，項目會從 md 斷點開始向右移動 2 個欄位。
"auto" - 使用時，項目會移動到網格容器的右邊緣。

<Grid container spacing={3} sx={{ flexGrow: 1 }}>
  <Grid size={{ xs: 6, md: 2 }} offset={{ xs: 3, md: 0 }}>
    <Item>1</Item>
  </Grid>
  <Grid size={{ xs: 4, md: 2 }} offset={{ md: 'auto' }}>
    <Item>2</Item>
  </Grid>
  <Grid size={{ xs: 4, md: 2 }} offset={{ xs: 4, md: 0 }}>
    <Item>3</Item>
  </Grid>
  <Grid size={{ xs: 'grow', md: 6 }} offset={{ md: 2 }}>
    <Item>4</Item>
  </Grid>
</Grid>

<Grid container spacing={3} sx={{ flexGrow: 1 }}>
  <Grid size={{ xs: 6, md: 2 }} offset={{ xs: 3, md: 0 }}>
    <Item>1</Item>
  </Grid>
  <Grid size={{ xs: 4, md: 2 }} offset={{ md: 'auto' }}>
    <Item>2</Item>
  </Grid>
  <Grid size={{ xs: 4, md: 2 }} offset={{ xs: 4, md: 0 }}>
    <Item>3</Item>
  </Grid>
  <Grid size={{ xs: 'grow', md: 6 }} offset={{ md: 2 }}>
    <Item>4</Item>
  </Grid>
</Grid>

按下 Enter 開始編輯

自訂斷點

如果您為主題指定自訂斷點，則可以在響應式值中使用這些名稱作為網格項目屬性。

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;
  }
}

限制

direction column 和 column-reverse

size 和 offset 屬性在 direction="column" 和 direction="column-reverse" 容器中不受支援。

它們定義了組件在給定斷點將使用的網格數。它們旨在控制 row 容器中使用 flex-basis 的寬度，但它們會影響 column 容器中的高度。如果使用這些屬性，可能會對 Grid 項目元素的高度產生不良影響。